FANDOM


Fly-in-Navigationsmenü

Um ein Navigationsmenü wie oben im Bild zuerstellen, müsst Ihr zunächst folgenden Code in die CSS einspeichern und an den Rotmarkierten Stellen anpassen.

CSS-Code Bearbeiten

.menu {position:relative; margin:5px 0px 45px -70px;}
.menu ul {padding:0; margin:0; list-style:none;}
.menu ul.level1 {position:relative; z-index:100;}
.menu ul.level1 li.fly {float:left; width:100px; height:35px; background: Hintergrundfarbesetzen;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-top-left-border-radius: 5px;
-webkit-bottom-left-border-radius: 5px;
}

.menu ul.level1 li.fly a.topa {display:block; height:35px; line-height:35px; padding-left: 5px; width:90px; text-decoration:none; font-size:12px; font-family:arial, sans-serif; color:#444; font-weight:bold; float:right;
background: url(Pfeildatei auswählen) no-repeat 40px; }

.menu ul.level1 div {position:absolute; left:100px; top:0; width:600px; height:0; z-index:-1; overflow:hidden;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

.menu ul.level1 div ul {position:absolute; left:-600px; top:0; background:Hintergrundfarbesetzen;
-moz-border-radius: 0 5px 5px 0;
-webkit-top-right-border-radius: 5px;
-webkit-bottom-right-border-radius: 5px;

-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

.menu ul.level1 ul li {float:left; height:35px; position:relative;}
.menu ul.level1 ul li a {float:left; height:35px; line-height:35px; white-space:nowrap; padding:0 15px; text-decoration:none; font-size:13px; font-family:arial, sans-serif; color:#444; font-weight:bold; background:Hintergrundfarbesetzen;}
.menu ul.level1 div ul ul {position:absolute; left:0; top:-170px; width:155px; z-index:-1;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

.menu ul.level1 div ul ul li {float:left; width:155px; height:25px;}
.menu ul.level1 div ul ul li a {display:block; width:125px; padding-left:15px; text-decoration:none; font-size:13px; font-family:arial, sans-serif; color:#444; font-weight:bold; height:25px; line-height:25px; font-weight:normal; background:none;}


.menu ul.level1 li:hover > a.topa {color:#fff;}

.menu ul.level1 li:hover div {left:100px; top:0; height:180px; width:600px;}

.menu ul.level1 :hover div ul {left:0;}
.menu ul.level1 :hover div ul ul {left:1px; top:-180px; padding-bottom:5px; background:Hintergrundfarbesetzen;
-moz-border-radius: 0 0 5px 5px;
-webkit-bottom-left-border-radius: 5px;
-webkit-bottom-right-border-radius: 5px;
}
.menu ul.level1 li:hover div ul li:hover a {position:relative;}
.menu ul.level1 li:hover div ul li:hover > a {color:#fff;}

.menu ul.level1 :hover div ul :hover ul {left:1px; top:35px;}

HTML-Code Bearbeiten

Wie man im folgenden Code gut sehen kannst, ist das Menü nichts anderes als eine Simple Unorderdlist. Mithilfe von Ankern wird der jeweilige Menüpunkt logischerweise verlinkt.

<ul class="level1"><br>
		<li class="fly"><a class="topa" href="startseite.html">Home</a>
			<div>
			<ul>
				<li><a href="#url">Bereich A</a></li>
				<li><a href="#url">Bereich B</a>
					<ul>
                                      <li><a href="#url">test1</a></li>
                                      <li><a href="#url">test2</a></li>
                                      <li><a href="#url">test3</a></li>
					</ul>
				
				</li>
				<li><a href="#url">Bereich C</a>
					<ul>
					</ul>
				
				</li>
				<li><a href="#url">Bereich D</a>
				
					<ul>
					</ul>
				
				</li>
				<li><a href="#url">Bereich E</a>	
			</li>
				<li><a href="#url">Bereich F</a></li>
			</ul>
			</div>
		</li>
	</ul>