Mega-Dropdown-Menü in TYPO3, Typoscript und CSS
Nachdem ich das Dropdown-Flyout-Menü bekanntermaßen aus der Perspektive der Usability nicht besonders gut leiden kann, blieb immer die Frage nach einer Möglichkeit, ein vollständiges Menü aller Seiten auf eine Website zu bekommen, welches auch von Grobmotorikern wie mir (zumindest beim surfen bin ich klickfaul und unpräzise), bequem bedient werden kann.
Da bleibt eigentlich nur ein MEGA-Dropdown-Menü, da dieses im "Default"-Zustand normalerweise ca. eine Zeile hoch ist und gerade bei großem Websites (also ab 30 Seiten aufwärts) eine schnelle Navigation auch in tiefe Ebenen erlaubt.
Außerdem habe ich ein paar weitere Ansprüche:
- Barrierearm
- Java-Frei
- Formatierbar per CSS
- Title-text der Links aus TYPO3
- Aufbau nur durch den TYPO3-Seitenbaum
- Jedes Element muss erreichbar sein, um gegebenenfalls eigenes CSS darauf mappen zu können. (z.B. wie beim OTTO-Shop, bei dem Jede Kategorie eine eigene Farbe hat)
Wenn jemand das ganze noch um sinnvolles Javascript ergänzen möchte (z.B. um Zuklappen zu verzögern wie mit hoverIntend-jQuery), dann sollte das Menü im Grundsatz dazu passen müssen.
Im Grunde genommen bleibt jedoch, das der Seitenbaum als Unordered List mit weiteren Unordered Lists für die Untermenüpunkte (etc. etc.) abgebilded wird, und das ganze mit CSS zum Leben erweckt wird.
Zur Adressierung der einzelnen Elemente im CSS hab ich mir für
- die Ebenen Klassen
- die Menüpunkte die Page-IDs
- die Links die Title-Tags
auserkoren. Das muss jetzt "nur noch" ins Typoscript.
Nun muss man aber seit TYPO3 Version 4.x getText-Variablen verwenden, und kann nicht mehr mit substitutions arbeiten. Und diese getText-Dinger kann man auch nicht in jeden Wrapper schmieren, wie bisher - und damit wurde die ganze Aktion eine furchtbare Knobelaufgabe - aber ich hab es gelöst bekommen, indem ich die Wrapper zerlegt habe.
Das Typoscript
#####################################################
# MEGA-Dropdown-Menu rendern
temp.menu_mdd = HMENU
temp.menu_mdd {
wrap = <div class="menu2">|</div>
# die Pages wollen wir nicht
excludeUidList = 47,11,08,15
special = directory
# Hier die Start-Page-ID angeben, deren Unterseiten das Hauptmenü abbilden
special.value = 1
# Hauptmenue
1 = TMENU
1 {
wrap = <ul class="level1"> | </ul>
expAll = 1
NO {
ATagTitle.field = subtitle//title
stdWrap.prepend = COA
stdWrap.prepend.10.wrap = ~ |
wrapItemAndSub = | </li>
allWrap = <li class="inner" id="pid{field:uid}"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
# 2. Ebene
2 = TMENU
2 < .1
2.wrap = <div class="megadd clearfix"> <ul class="level2"> | </ul></div>
2.NO.allWrap = <li class="inner2" id="pid{field:uid}"> |
# 3. Ebene
3 = TMENU
3 < .1
3.wrap = <ul class="level3" > | </ul>
3.NO.allWrap = <li class="inner3" id="pid{field:uid}"> |
# 4. Ebene
4 = TMENU
4 < .1
4.wrap = <ul class="level4" > | </ul>
4.NO.allWrap = <li class="inner4" id="pid{field:uid}"> |
}
Das CSS dazu ist relativ Simpel, und ein Mega-Dropdown bringt den großen Vorteil, daß man die einzelnen Punkte des Haupmenüs nicht in der Breite bestimmen muß, da Breite und Position des Drop-Down-Teils immer gleich sind: volle Breite unterm Menü.
Beim Dropdown-Flyout hingegen ist man gezwungen die Breite zu definieren, damit das Untermenü auf unter dem Hauptmenüpunkt aufklappt und nicht irgendwo anders.
Also kann ich die erste Ebene komplett inline setzen, und alle Ebenen darunter als Blockelemente, oder besser: als Floats.
Das folgende CSS formatiert die Basics, und dazu in Farben, die vor allem dazu dienen, das man erkennt was wann wo und wie triggert. Ab da müsst Ihr selber weiterkommen.
das CSS zum Mega-Dropdown Menü
#nav {width: 1000px; background-color: silver; height: 40px; font-size: .9em; }
.menu2 ul, .menu2 li {
list-style: none;
margin: 0;
padding: 0;
}
.menu2 ul.level1 {
width: 990px;
height: 25px;
padding-left:10px;
padding-top: 5px;
}
.menu2 ul.level1 li {
display: inline;
height: 40px;
padding: 8px;
font-weight: bold;
}
.menu2 ul.level1 li a {
padding: 10px ;
text-decoration: none;
color: purple;
}
.menu2 ul.level1 li li a {
padding: 3px;
display: block;
color: navy;
}
.menu2 ul.level1 a:hover,
.menu2 ul.level1 a:active,
.menu2 ul.level1 a:focus
{
color: black;
background-color: yellow;
}
.menu2 ul.level1 li li {
display: block;
height: auto;
padding: 1px;
}
.menu2 ul.level1 li:hover {
background-color: red;
}
.menu2 div.megadd {
position: absolute;
left: -999em;
width: 990px;
background: green;
z-index: 100;
clear: both;
vertical-align: bottom;
padding: 10px;
}
.menu2 ul.level1 li:hover div.megadd {
left: 50%;
margin-left: -495px;
}
.menu2 ul.level2 li.inner2, .menu2 ul.level2>li.inner {
width: 200px;
float: left;
}
.menu2 ul.level3 {
padding-left: 10px;
}
.menu2 ul.level4 {
padding-left: 20px;
}
Einbau und Feinschliff
Nicht vergessen:
im TS muss noch das alte Menüobjekt gelöscht und auf das neue verwiesen werden.
Danach kann man das CSS nach Belieben ergänzen, z.B. um vertikale Positionierung der Menüinhalte vorzunehmen, oder um das Mega-Flyout je nach Unterpunkt individuell abzuwandeln.
Und die Farben sind ja auch nicht so, daß man sie behalten möchte ;-)
Lesetips zu diesem Thema:
selfhtml.org/css/eigenschaften/pseudoformate.htm
www.css4you.de/wscss/css03.html#attribut
Eine ältere Variante der hier veröffentlichten Version, welche auch noch teilweise um Bilder zu einigen Menüpunkten beinhaltet, habe ich auf www.buschmann-winkelmann.de eingebaut.
Seite 1 von 1 1
Bilder kann man z.B. mit CSS im Menü einbinden.
Gruß
Tobi
Das ist richtig, wenn die NICHT übers TYPO-Backend änderbar sein müssen.
Auch dazu sind immer die Page-IDs in den Links drin, damit wirklich jedes Element einzeln ansteuerbar ist; kann zwar zu recht langen CSS-Lines führen, aber funktioniert präziese.
Super MENÜ!!!! DANKE
wie hast du das mit den Bildern im Menü gelöst?
Hi, ich nehme an, Du meinst bei der Buschmann-Winkelmann.
Die Info ist Gebührenpflichtig ;-)
Im Ernst: das war eine sehr Aufwändige Entwicklung, die auf die Contentelemente zugreift (damit der Kunde die Bilder selber ändern kann) und die kann ich unmöglich unentgeltlich herausgeben. Sonst macht mir der Kunde die Hölle heiß (und zu Recht).