Fandom

Die Informatiker Wiki

Fly-in Navigationsleiste mit HTML&CSS

133Seiten in
diesem Wiki
Seite hinzufügen
Diskussion0 Teilen
Fly-in-Navigationsmenü.png

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>

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.

Auch bei Fandom

Zufälliges Wiki