Vertikale verschachtelte Listennavigation
Nach obenZielsetzung
Es soll eine vertikale Naviagtion mit 4 Menüpunkten erstellt werden, die jeweils 3 Unterpunkte besitzen.
Auf dem aktiven Menüpunkt sollen die dazugehörigen Unterpunkte sichtbar sein - die anderen jedoch nicht.
Vorgehensweise
Zunächst erstellt man die verschachtelte Liste, die nach den Vorgaben strukturiert ist. Um die Mutter- und Tochterelemente der Liste gezielt formatieren zu können, wird die Übergeordnete Liste mit einer ID und die untergeordneten Listen mit Klassen versehen. Die verschachtelte Liste des aktiven Menüpunktes bekommt ebenfalls neben der Klasse eine ID, damit sie im Gegensatz zu den anderen Tochterlisten dargestellt wird.
<ul id="menue">
<li><a href="#">Oberpunkt 01</a>
<ul class="submenue" id="active">
<li><a href="#">Untermenü 1.a</a></li>
<li><a href="#">Untermenü 1.b</a></li>
<li><a href="#">Untermenü 1.c</a></li>
</ul>
</li>
<li><a href="#">Oberpunkt 02</a>
<ul class="submenue">
<li><a href="#">Unterpunkt 2.a</a></li>
<li><a href="#">Unterpunkt 2.b</a></li>
<li><a href="#">Unterpunkt 2.c</a></li>
</ul>
</li>
<li><a href="#">Oberpunkt 03</a>
<ul class="submenue">
<li><a href="#">Unterpunkt 3.a</a></li>
<li><a href="#">Unterpunkt 3.b</a></li>
<li><a href="#">Unterpunkt 3.c</a></li>
</ul>
</li>
<li><a href="#">Oberpunkt 04</a>
<ul class="submenue">
<li><a href="#">Unterpunkt 4.a</a></li>
<li><a href="#">Unterpunkt 4.b</a></li>
<li><a href="#">Unterpunkt 4.c</a></li>
</ul>
</li>
</ul>
Der eigentliche Trick ist wie bei vorherigen Beispielen der Wechsel von display:none; zu display:block;, was das Ein- und Ausgeblenden der Tochterlisten bewirkt. Die Zuordnung dieser Attribute erfolgt durch die ID "active".
Zum Beispiel bekommt die Seite "Home" im Navigationsmenü für das entsprechende Listenelement, wo sich der Link zu dieser Seite befindet, die ID "active" zugewiesen und für andere Seiten an den dafür vorgesehenen Stellen.
Dies kann man statisch für jede HTML-Seite einzeln machen oder einfach variabel mit PHP - für Framesets ist dieses Navigationsprinzip allerdings nicht unbedingt geeignet.
Das CSS ist eigentlich sehr simpel und bedarf, falls man die CSS-Grundlagen schon beherrscht, keiner großen Erklärungen. Wer allerdings damit dennoch Verständnisproblem haben sollte, empfehle ich die ausführlich erläuterten Beispiele für einfach Listen anzuschauen.
ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
ul#menue
{
width: 300px;
margin: 3em 0 0 0;
}
ul#menue li a
{
margin: 2px 0;
height: 25px;
line-height: 25px;
text-align: center;
border: 1px solid #666;
background: #ccc;
display: block;
color: #000;
text-decoration: none;
}
ul.submenue
{
display: none;
}
ul#active
{
display: block;
}
ul#active li a
{
background: none;
}
ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a
{
background: none; /* IE */
}
Nach obenEin Beispiel
Hier gehr es zum Beispiel
Drimascus
Das Beispiel funktioniert net...
amasell
muss ich leider bestätigen...
pberndt
Was funktioniert da genau nicht?! (Einen Wechsel auf ein anderes aktives Menü soll es bei Mausklick gar nicht geben, steht da aber auch ;))