Das Coolmenü um eine ausklappebene erweitern
Schritt 1: Html anpassen
Wollt ihr z.B. der Unterseite 1.1 eine weitere Liste mit Unteseiten hinzufügen, könnt ihr das Html wie folgt erweitern:
Zitat: <div id="klappmenu">
<ul id="liste">
<li>a href="#">Kategorie 1</a>
<ul>
<li><a href=" /Seite.htm">Unterseite 1.1</a>
<ul>
<li><a href=" /Seite.htm">Unterseite 1.1.1</a> </li>
<li><a href=" /Seite.htm">Unterseite 1.1.2</a> </li>
<li><a href=" /Seite.htm">Unterseite 1.1.3</a> </li>
</ul>
</li>
<li><a href="/Seite.htm">Unterseite 1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.3</a></li>
</ul>
</li>
<li><a href="#">Kategorie 2</a>
...
...
...
</ul>
</div>
Mit dem grünen, wird die neue Liste definiert.
Mit dem braunen legt ihr wieder fest, auf welche Seite verlinkt wird (siehe Beschreibung oben).
Wichtig ist, dass die neue grüne liste, zwischen dem alten blauen Listenelement steht.
Schritt 2: CSS anpassen
Die neue Unterliste muss aus dem Elementfluss genommen werden. Deshalb müsst ihr das rot markierte löschen:
Zitat: /* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 140px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
overflow: hidden;}
Bei folgendem Block muss der Selektor geändert werden:
Zitat: #liste li:hover ul { display:block; } /* ausgeklappt */
Hier werden alle Nachfahren vom Typ ul angesprochen. Das war bei einer Tiefe von eins auch irrelevant (Alle ul Elemente, die Nachfahre sind, sind auch direkter Nachfahre).
Jetzt ist es aber nicht mehr so, deshalb dürfen nur noch die direkten Nachfahren selektiert werden:
Zitat: #liste li:hover > ul { display:block; } /* ausgeklappt */
Das rote müsst ihr neu einfügen.
Das neue Untermenü wird wie bereits gesagt aus dem Elementfluss genommen und an dem Element ausgerichtet, bei welchem es ausklappen soll. Dazu muss die position Eigenschaft des entsprechenden Elementes auf relative gesetzt werden:
Zitat: #liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px;
position:relative;
}
Das rote muss wieder eingefügt werden.
Schritt 3: Neue Untermenüliste positionieren
Um das neue Untermenü nun richtig auszurichten, wird die Liste selektiert, welche Nachfahre einer Liste, welche Nachfahre des Elementes mit der id liste ist:
Die position Eigenschaft dieser Liste wird nun auf absolute gesetzt:
Zitat: #liste ul ul{
position:absolute;
}
Nach oben soll das Untermenü einen Abstand von 0 haben und nach Links als Abstand die Breite des Menüpunktes:
Zitat: #liste ul ul{
position:absolute;
top:0;
left:XXpx;
}
Die XX muss mit der Breite der Einträge ersetzt werden.
Fertiges Code Beispiel (Alles, was rot ist, wurde geändert bzw. hinzugefügt)
Html:
Zitat: <div id="klappmenu">
<ul id="liste">
<li><a href="#">Kategorie 1</a>
<ul>
<li><a href="/Seite.htm">Unterseite 1.1</a>
<ul>
<li><a href="/Seite.htm">Unterseite 1.1.1</a></li>
<li><a href="/Seite.htm">Unterseite 1.1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.1.3</a></li>
</ul>
</li>
<li><a href="/Seite.htm">Unterseite 1.2</a></li>
<li><a href="/Seite.htm">Unterseite 1.3</a></li>
</ul>
</li>
<li><a href="#">Kategorie 2</a>
<ul>
<li><a href="/Seite.htm">Unterseite 2.1</a></li>
<li><a href="/Seite.htm">Unterseite 2.2</a></li>
<li><a href="/Seite.htm">Unterseite 2.3</a></li>
</ul>
</li>
<li><a href="#">Kategorie 3</a>
<ul>
<li><a href="/Seite.htm">Unterseite 3.1</a></li>
<li><a href="/Seite.htm">Unterseite 3.2</a></li>
<li><a href="/Seite.htm">Unterseite 3.3</a></li>
</ul>
</li>
<li><a href="#">Kategorie 4</a>
<ul>
<li><a href="/Seite.htm">Unterseite 4.1</a></li>
<li><a href="/Seite.htm">Unterseite 4.2</a></li>
<li><a href="/Seite.htm">Unterseite 4.3</a></li>
</ul>
</li>
<li><a href="#">Kategorie 5</a>
<ul>
<li><a href="/Seite.htm">Unterseite 5.1</a></li>
<li><a href="/Seite.htm">Unterseite 5.2</a></li>
<li><a href="/Seite.htm">Unterseite 5.3</a></li>
</ul>
</li>
</ul>
</div>
CSS:
Zitat: <style type="text/css">
<!--
/* Feld um das Klappmenu */
#klappmenu {
position: absolute;
margin-top: 140px; /* Abstand von oben anpassen */
margin-left: 30px; /* Abstand zur linken Seite anpassbar */
width: 800px; /* die Breite anpassbar */
}
#klappmenu ul { list-style-type: none; margin:0px; padding: 0px; }
#liste ul li { margin: 0; border: none; }
/* Button Breite + Rahmen + Abstand */
#liste li {
width: 135px;
float: left;
text-align: center;
border: 1px solid #c9c9c9;
margin-right: 5px;
margin-left: 5px;
position:relative;}
/* Button Linkfarbe + Hintergrundfarbe */
#liste a {
display: block;
padding: 5px 5px 5px 5px;
color: #000000;
font-size: 13px;
background-color: #FFFFFF;
text-decoration: none; }
/* Button Hover-Farbe */
#liste a:hover {
color: #FFFFFF;
background-color: #008080; }
#liste li ul { display:none; } /* eingeklappt */
#liste li:hover > ul { display:block; } /* ausgeklappt */
#liste ul ul{
position:absolute;
top:0;
left:136px;
}
-->
</style>
Zuletzt bearbeitet von o-4-n am 04.12.2012, 12:36, insgesamt 13-mal bearbeitet
|
