Hey Gast,
Jap der Titel sagts schon. Hier geht es darum eine schickes, multifunktionales Navigationsmenü zu schaffen, das komplett ohne JavaScript auskommt.
Es handelt sich hierbei um ein Script für fortgeschrittene CSS-Nutzer, jedoch werde ich versuchen, die Navigation Schirtt für Schritt aufzubauen und zu erklären, weshalb ich glaube, dass auch ein Anfänger damit zurecht kommen sollte.
Let's get started
Hinweis: Alle, die die Listen-Tags, den nav-Tag und die Pseudklasse :hover bereits kennen, können diesen Teil überspringen.
Zuallererst. Ein Tag ist ein HTML-Element, das durch < NAME > gekennzeichnet wird und durch < /NAME > geschlossen wird. Das hast du wahrscheinlich schon bei Tabellen oder auch dem berühmten div-Tag schon gesehen und kennengelernt. Diese Tags kann man mit CSS formatieren.
Zuerst der nav-Tag:
Dieser ist neu im HTML5-Repertoire und kennzeichnet eine Navigation.
Das heißt nicht, dass du keine Navigation ohne nav-Tag machen kannst, jedoch ist es im Anbetracht der Suchmaschinenoptimierung und der mobilen Ausgabegeräte sinnvoll diese Tags zu verwenden. Ich könnte anstatt dieses Tags genauso gut einen div-Tag mit entsprechender Klasse oder ID verwenden, aber warum unnötig tippen, wenn ich mit diesem Tag gleich mehrere Vorteile habe?
Die Listen-Tags sind etwas komplizierter. Der Einfachheit halber beschäftigen wir uns hier nur mit den „Punkt-Listen“ und nicht den geordneten oder nummerierten.
Eine Liste wird in HTML mit dem ul-Tag eingeleitet und die Listenelemente in dieser Liste mit dem li-Tag unterschieden. Eine einfache Liste sähe in HTML wie folgt aus:
- Spoiler:
- Code:
-
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
Zu guter letz möchte ich noch die Pseudoklassen :hover erwähnen. Als Pseudoklassen werden in CSS alle mit einem Doppelpunkt eingeleitete Elemente bezeichnet. Bekannt sind sie vor allem durch das Formatieren von Links. Sie formatieren nicht den Tag/die Klasse/ID direkt, sondern ein Element, dass mit dem Tag/der Klasse/ID in Zusammenhang stehende Element. ZB bezeichnet die in diesem Tutorial verwendete Pseudoklasse :hover ein Rollover und definiert das Verhalten des Elements, wenn man mit der Maus/dem Finger über ein das Element fährt aka es hovert.
Einfaches Menü ohne DropDown
Was wir zuallererst brauchen, ist ein einfaches Menü, das ohne Dropdown funktioniert. Dazu brauchen wir eine Liste mit Links, die folgendermaßen aussieht. Das ganze wird via nav-Tag als Navigation/Menü gekennzeichnet, was uns auch das Formatieren erleichtert, da wir sonst alle Listen ansprechen würden.
- HTML:
- Code:
-
<nav>
<ul>
<li><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
</ul>
<nav>
Diese 3 Links in einer Liste sehen noch ziemlich umspektakulär und unnütz aus. Mit folgendem CSS kann man sich das ganze besser ansehen. (Das CSS ist selbsterklärend da auskommentiert).
- CSS:
- Code:
-
nav {
width: auto; /* Volle Breite ausnützen */
z-index: 2; /* damit die Navigation über anderen Dingen liegt */
}
/* Standard-Linkformatierung loswerden */
nav a:link, nav a:visited {
color: #fff;
background: #000; display: block; /* Hintergrund und über die gesamte Breite */
text-decoration: none;
}
nav a:hover, nav a:active {
color: #000;
background: #FFF; display: block; /* Hintergrund und über die gesamte Breite */
text-decoration: none;
}
nav ul {list-style: none;} /* Listenpunkte loswerden */
nav ul, nav li, nav a /* Abstände der Liste loswerden */ {
margin: 0;
padding: 0;
}
nav > ul > li {
float: left; /* Nebeneinanderstellen der Elemente */
position: relative; /* Finger weg; wichtig */
}
nav > ul > li > a {
line-height: 45px; /* Gesamt-Zeilenhöhe, der obersten Zeile */
padding: 0 15px; /* Abstand der Schrift zum Rand */
-webkit-transition: color 1s; -moz-transition: color 1s; -o-transition: color 1s; transition: color 1s; /* Zeitverzögerung bei Farbänderung */
}
Einfaches DropDown
Jetzt wird’s spannend!
In diesem Teil erstellen wir das eigentliche DropDown.
Dazu müssen wir zuerst definieren, unter welche Punkte ein DropDown kommt. Ich will es in diesem Fall unter Punkt 2 und Punkt 3, während Punkt 1 kein DropDown bekommt. Dazu müssen wir den Punkten Unterpunkte hinzufügen (stell dir die ursprüngliche Listenformatierung vor, wie wenn du bei einer Word-Liste Unterpunkte einrückst).
Das funktioniert indem man den li-Tag um eine vollständige Liste erweitert, sprich bevor ein li-Tag geschlossen wird eine neue Punkt-Liste einfügt. Dadurch ändert sich der HTML-Teil in folgendes ab:
- HTML:
- Code:
-
<nav>
<ul>
<li><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2a</a></li>
<li><a href="#">Punkt 2b</a></li>
</ul>
</li>
<li><a href="#">Punkt 3</a>
<ul>
<li><a href="#">Punkt 3a</a></li>
<li><a href="#">Punkt 3b</a></li>
</ul>
</li>
</ul>
</nav>
Und das CSS wird um folgendes erweitert (wieder auskommentiert):
- CSS:
- Code:
-
nav > ul > li > ul {
opacity: 0; visibility: hidden; /* DropDown in der Standardansicht unsichtbar */
background: #000; /* Hintergrund des Blocks */
text-align: left; /* Text-Ausrichtung im DropDown */
position: absolute; /* Finger weg; wichtig */
top: 45px; /* Abstand von oben; unterscheidet sich dieser Wert von dem im nächsten Absatz gibt es einen "Einblende-Effekt" */
left: 50%; margin-left: -70px; /* Finger weg; für die mittige Positionierung unter dem Element, margin muss die Hälfte der DropDown-Box sein */
width: 140px; /* Breite des DropDown-Box */
-webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; /* Zeitverzögerung */
}
nav > ul > li:hover > ul {
opacity: 1; visibility: visible; /* DropDown bei Rollover sichtbar */
top: 45px; /* Abstand von oben, in diesem Fall Zeilenabstand */
}
nav ul ul a {
padding: 5px 8px 7px 15px; /* definiert die Abstände im Dropdown */
border-bottom: 2px dashed red; /* Beispiel, wie das DropDown weiter formatiert werden kann */
}
nav ul ul a:hover { background: red; /* überschreibt den Hintergrund der Linkdefinition vom letzten Teil */}
Ich will noch eine weiter Klappbox!
Wer das Prinzip verstanden hat, kann sich vielleicht denken, dass es möglich ist, auch von dem DropDown noch einmal Boxen auszuklappen.
Ich will bei Punkt 2a und 3b nocheinmal Untermenüs haben, weshalb ich den HTML-Code auf das folgende ändere.
- HTML:
- Code:
-
<nav>
<ul>
<li><a href="#">Punkt 1</a></li>
<li><a href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2a</a>
<ul>
<li><a href="#">Punkt 2a.1</a></li>
<li><a href="#">Punkt 2b.1</a></li>
</ul>
</li>
<li><a href="#">Punkt 2b</a></li>
</ul>
</li>
<li><a href="#">Punkt 3</a>
<ul>
<li><a href="#">Punkt 3a</a></li>
<li><a href="#">Punkt 3b</a>
<ul>
<li><a href="#">Punkt 3b.1</a></li>
<li><a href="#">Punkt 3b.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Und das CSS wird um folgendes erweitert (wieder auskommentiert):
- CSS:
- Code:
-
nav ul ul ul {
visibility: hidden; opacity: 0; /* gleiches Spiel; Block verstecken */
position: absolute; /* Finger weg; wichtig */
top: 0; /* Abstand nach oben */
left: 120px; /* Wenn Unterschied zum nachstehenden Wert => "Einblendeffekt" */
width: 140px; /* Breite des Untermenüs */
-webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; /* Zeitverzögerung */
}
nav ul ul > li:hover > ul {
opacity: 1;visibility: visible; /* gleiches Spiel; Block anzeigen */
left: 140px; /* Anzeige-Abstand zum 1. DropDown; Boxbreite=kein Abstand */
}
nav > ul ul > li { position: relative;} /* Macht das 2.Untermenü von der Position des "Klappschalters" abhängig */
Noch Fragen?
Die hier vorgestellte Version ist die stark vereinfachte Version eines Scripts, dass ich vor Jahren mühselig zusammengetragen habe.
Sollte irgendetwas unklar sein oder du den Code modifizieren wollen, stehe ich gerne mit Rat und Tat zur Verfügung bzw kann auch fertige Modifikationen des Scripts (wie etwa lustige Sprechblasen oder ein Kugelmenü) anbieten.
Startseite 
So März 18, 2012 12:19 pm
