Teil 2 - Dropdownmenü mit 3 und mehr Ebenen
Meine kleine Anleitung für ein TYPO3 Dropdownmenü erfreut sich großer Beliebtheit. Dennoch erreichen mich oft Mails von Lesern, die mehr als 2 Ebenen im Dropdown Menü unterbringen möchten, es aber nicht schaffen das Beispiel zu erweitern.
Aus diesem Grund hab ich mich dazu entschlossen, hier speziell auf das Erstellen von TYPO3 Menüs mit beliebig vielen Ebenen einzugehen. Natürlich ist es fraglich, bis zu welcher Anzahl von Untermenüs es Sinn macht auf ein Aufklappmenü zurückzugreifen da der Bedienkomfort bei zu vielen Ebenen schnell verloren geht. Deshalb rate ich euch nicht mehr als 4 Ebenen in einem Dropdownmenü abzubilden. Wer hier einige Details nicht versteht sollte vielleicht erst das oben genannte Menü-Tutorial durchschmökern - dort sind die Einzelheiten näher erklärt.
So soll´s aussehen
Ein extremes Beispiel mit 4 Ebenen...
Das TypoScript
Zuerst das TypoScript. Es ist sehr einfach mit TYPO3 die verschachtelte Liste mit der entsprechenden Anzahl an Unterebenen auszugeben. Einfach folgenden Code im TypoScript-Setup einfügen:
TypoScript:
### Menü ###
temp.menu = HMENU
temp.menu {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
2 < .1
3 < .1
4 < .1
}
lib.container < temp.menu
Das TMENU für die erste Ebene wird gesetzt und anschließend für alle weiteren Ebenen kopiert. Um eine 5te Ebene auszugeben müsste einfach 5 < .1 angehängt werden.
Das JavaScript
Auch der JavaScript-Code muss wieder im Kopf eingefügt werden um die IE6-Kompatibilität zu gewährleisten. Da mich auch immer wieder Fragen erreicht haben, wie man denn dieses JavaScript im Kopf der TYPO3-Seite einbaut zeige ich hier eine einfache Möglichkeit, dies ganz simpel per TypoScript zu realisieren:
TypoScript:
page.headerData.120 = TEXT
page.headerData.120.value (
<script type="text/javascript">
//<![CDATA[
function show(element){
element.className += "hover";
}
function hide(element){
element.className = element.className = "";
}
//]]>
</script>
)
Nun ist auch der IE6 gewappnet für die CSS-Formatierung. Allerdings geht´s im IE6 nur dann, wenn auch JavaScript aktiviert ist - aber das ist zu 99% der Fall.
Das CSS
Der kniffligste Teil liegt meiner Meinung nach im CSS-Design. Die meisten Probleme entstehen durch die Verschachtelung der Listenelemente und die dadurch entstehende Vererbung der CSS-Eigenschaften. Ich habe das Beispiel daher recht ordentlich kommentiert und die Ebenen-Eigenschaften voneinander getrennt, so dass für weitere Ebenen nur zwei Styles hinzugefügt werden müssen.
CSS:
<style type="text/css">
ul.menu, ul.menu ul {
list-style-type: none;
}
ul.menu a {
display: block;
padding: 3px 10px 3px 10px;
font-weight: normal;
}
ul.menu li {
padding: 0;
margin: 0;
float: left;
background-color: #FFF9E4;
border:1px solid #26383D;
height: 20px;
}
/* Für Unterpunkte keine Float-Eigenschaft */
ul.menu ul li {
float:none;
background-color: transparent;
}
/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.menu ul li.hover, ul.menu ul li:hover {
background-color: #FFF9E4;
}
/* Zweite Ebene */
ul.menu ul {
margin:0;
padding: 0;
position: absolute;
background-color: #26383D;
border: 1px solid #FFF9E4;
display: none;
width: 180px;
}
/* Zweite Ebene anzeigen */
ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
/* Dritte Ebene */
ul.menu li.hover ul ul, ul.menu li:hover ul ul {
display: none;
margin-left: 160px; /* Breite eines Listenelements - Überlagerung */
margin-top: -20px; /* Höhe eines Listenelements */
}
/* Dritte Ebene anzeigen */
ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
display: block;
}
/* Vierte Ebene */
ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
display: none;
}
/* Vierte Ebene anzeigen */
ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
display: block;
}
</style>
Die zweite Ebene klappt nach unten auf - deshalb muss die Position des Menüblocks nicht weiter verschoben werden. Bei der dritten und vierten Ebene aber, soll der Menüblock rechts neben der zweiten Menüebene erscheinen, da ja kein Text verdeckt werden soll. Aus diesem Grund wird der margin-left und der margin-top entsprechend dafür verwendet um die gewünschte Position zu erreichen.
