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

  1. die Ebenen Klassen
  2. die Menüpunkte die Page-IDs
  3. 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.


Werbung


Das Typoscript

#####################################################
# MEGA-Dropdown-Menu rendern
temp.menu_mdd = HMENU
temp.menu_mdd {
wrap = <div>|</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> | </ul>
expAll = 1
NO {
ATagTitle.field = subtitle//title
stdWrap.prepend = COA
stdWrap.prepend.10.wrap = ~  |
wrapItemAndSub = | </li>
allWrap = <li id="pid{field:uid}"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
# 2. Ebene
2 = TMENU
2 < .1
2.wrap = <div> <ul>  | </ul></div>
2.NO.allWrap = <li id="pid{field:uid}"> |
# 3. Ebene
3 = TMENU
3 < .1
3.wrap = <ul > | </ul>
3.NO.allWrap = <li id="pid{field:uid}"> |
# 4. Ebene
4 = TMENU
4 < .1
4.wrap = <ul > | </ul>
4.NO.allWrap = <li 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.


Werbung


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 😉


Werbung


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.