Tutorial: HTML5 Navigation mit mehreren Ebenen “Basic”
Tutorial: HTML5 Navigation mit mehreren Ebenen ‘Basic’
Das Menü einer Website
Gerade für “Beginners” immer wieder ein etwas schwieriges Thema ist das Menü einer Webseite. Stimmt die Navigation nicht, stimmt es meistens auf der ganzen Website nicht wirklich 😉 Also schauen wir uns doch einfach mal an, was da so passiert und wie man das Ganze ein bisschen hübsch machen kann. Es ist nicht schwer, wenn man einmal verstanden hat, was da tatsächlich passiert.
Wir benutzen für unser Beispiel eine HTML-Datei “navigation.html” und eine externe CSS-Datei “style.css”.
Fangen wir mit dem HTML-Code an:
Alles, was wir brauchen, ist ein semantisch korrekter Container <nav></nav> für die Navigation und eine Ungeordnete Liste mit den Listenpunkten
<ul>
<li></li>
</ul>
Diese sind so verschachtelt, wie wir es dann in den Ebenen auch sehen möchten. In den Listenpunkten befinden sich die jeweilige Links auf die gewünschten Seiten
<nav>
<ul>
<li><a href="#">Ebene 1</a></li>
<li><a href="#">Ebene 1 inkl. 2. / 3. Ebene</a>
<ul>
<li><a href="#">Ebene 2</a></li>
<li><a href="#">Ebene 2/1</a></li>
<li><a href="#">Ebene 2/2</a>
<ul>
<li><a href="#">Ebene 3</a></li>
<li><a href="#">Ebene 3/1</a></li>
<li><a href="#">Ebene 3/2</a></li>
<li><a href="#">Ebene 3/2</a></li>
</ul>
</li>
</ul>
</nav>
Alles Weitere findet per CSS statt.
Um es korrekt zu machen, lagern wir den Style in eine eigene Datei aus und lassen das im HTML-Dokument einlesen. So wahren wir die strikte Trennung von Struktur und Layout, wie es das W3C vorsieht. Dies erfolgt in der HTML-Datei im Head via Link-Attribut <head><link rel="stylesheet" a href="style.css"></head>
—
/*Basic-Style und Darstellung der 1. Ebene*/
nav {
float: left;
font: bold 16px Arial, sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav ul li {
float:left;
}
nav ul li a {
float: left;
color:#fff;
padding: 10px 20px;
text-decoration:none;
background:#555;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
}
nav li ul {
background:#555;
left: -999em;
margin: 40px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
border: 1px solid rgba(0, 0, 0, 0.5);
}
nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
/*2. Ebene anzeigen und stylen*/
nav ul li a:hover,
nav ul li:hover > a {
background:#333;
}
nav li ul a:hover,
nav ul li li:hover > a {
background: #333;
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #000;
}
/*3. Ebene anzeigen und stylen*/
nav li:hover ul {
left: auto;
}
nav li li ul {
margin: -1px 0 0 160px;
visibility:hidden;
}
nav li li:hover ul {
visibility:visible;
}
Im ersten Teil des CSS haben wir den Listenpunkten der 1. Ebene gesagt, dass sie bitte nebeneinander stehen sollen und wie sie optisch aussehen sollen.
Dann bestimmen wir, wie sich die unteren Ebenen verhalten sollen.
Mit den letzten beiden Attributen geben wir vor, dass die unteren Ebenen erst angezeigt werden sollen, wenn wir mit der Maus darüber fahren.
Viel Spaß beim Umsetzen eurer eigenen Navigation!