Dropdown – Flyout Menu in TYPO3

Dropdown- Flyout Menues die ausklappen und deren Unterpunkte wieder ausklappen (ich mags nicht) sind natürlich auch mit Typo3 zu realisieren. Sogar für IE6 und IE7. Die hier vorgestellte Variante funktioniert mit reinem CSS ohne Javascript.

Meine persönliche Erfahrung ist, das die, die es VOR Fertigstellung einer Seite dieses Menü haben wollen, dann NACH der Fertigstellung es nicht mehr wollen: Mann muss ab der 2. Ebene die Maus präzise führen, und die Usability bleibt damit auf der Strecke.

Der hier vorgestellte Code ist von 2006, das CSS basiert auf einem der Menüs von Stu Nicols – dem ungeschlagenenen Meister des CSS.

Im CSS ist auch ein Link zu cssplay, da kann man das Menü „in Betrieb“ sehen – inzwischen ist es im CSS ertweitert, und Stu Nicols hat das Copyright geändert – wenn das Menü auf kommerziellen Seiten nun Verwendung finden soll, dann bitte nur unter Beachtung des Copyrights.

Da ich das Ding schon 5 x Umgebaut habe, sind mir leider irgendwann die Quellen-Angaben im TS abhanden gekommen, den Code gibt es also ohne derartige Kommentare. Das ändere ich gern, wenn mich jemand auf fehlende Erstellerkommentare hinweist.


Werbung



Erst einmal das Typoscript:

#####################################################
# Dropdown-FlyOut-Menu rendern
temp.menu_ddfo = HMENU
temp.menu_ddfo {
wrap = <div>|</div>
excludeUidList =
special = directory
# Hier die Start-Page-ID angeben
special.value = 1
# Hauptmenue
1 = TMENU
1 {
wrap = <ul> | </ul>
expAll = 1
NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>
NO.stdWrap.prepend = COA
NO.stdWrap.prepend.10.wrap = ~  |
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
}
ACT < .NO
ACT = 1
ACT.ATagParams =
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams =
}
2 = TMENU
2 {
wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
expAll = 1
NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
ATagParams =
}
}
# 3. Ebene
3 < .2
# 4. Ebene
4 < .2
}

Damit wird das Menü gerendert, aber es muss ja noch auf die Seite. Wer manuell mit CSC arbeitet weiss dann schon wie es geht, bei YAML/TTV ist der Header belegt mit verschiedenen anderen Elementen – wenn man in den Constants alle Features abschaltet und die Links in den Footer verbannt ist Platz für das Menü – ich hab in der einen Installation in der das (vorübergehend) drin war den Platz unter dem Banner verwendet, und dann mit CSS nach oben verschoben (Position absolut und dann Layer). Im TS der Website sah das dann so aus:

###### Da wir die Suche gekillt haben (constants)
#      koennen wir das TS-Objekt auch wegwerfen:
lib.header.10 >
### den Platz brauchen wir eh für das Menue:
lib.header.10 < temp.menu_ddfo

Dann steht der html-Code schon mal in der Website. Da das Menu aber über CSS läuft, kommt der eigentliche Trick erst jetzt.


Werbung


Und das CSS

/* ##########################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.yaml.de) #
** # "YAML for TYPO3" (c) by Dieter Bunkerd (http://yaml.t3net.de) ##########
*/
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* Angepasst von CRNET Christian Rehkopf www.crnet.de
** Fontsize in "px" ausgetauscht nach "em" / Transparenz
*/
.menu2 { float:left; width:100%;
background-color:#f8f8f8;
font-size:0.82em; position:relative; z-index:100;
/* margin-top: 15px */  }
/* remove all the bullets, borders and padding from the default list styling */
.menu2 ul { padding:0; margin:0; list-style-type:none;   }
.menu2 ul ul li { padding:0; margin:0; list-style-type:none; border-left: 1px black;}
.menu2 ul ul { width:135px; }  /* Cell size. Divide the main width (750px) by the number of cells you need */
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu2 li { float:left; width:88px; position:relative; }
/* style the links for the top level */
.menu2 a, .menu2 a:visited {
display:block;
font-size:1em;
font-weight:bold;
text-decoration:none;
color:#000000;
width:auto;
height:30px;
border:1px solid white;
border-width:1px 0 0 0;
background-color:white;
padding-left:6px;
padding-right:6px;
line-height:30px;
text-transform: uppercase;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu2 a, * html .menu2 a:visited {
width:74px;
w\idth:73px;
}
/* style the second level background */
.menu2 ul ul a.drop, .menu2 ul ul a.drop:visited {
width:140px;
background:#F1F1F1;
font-size:1em;
color:#000000;
}
/* style the second level hover */
.menu2 ul ul a.drop:hover {
width:140px;
color:#000000;
font-size:1em;
}
.menu2 ul ul :hover > a.drop {
width:140px;
background:white;
font-size:1em;
color: black;
}
/* style the third level background */
.menu2 ul ul ul a, .menu2 ul ul ul a:visited {
width:140px;
background:#efefef;
font-size:1em;
}
/* style the third level hover */
.menu2 ul ul ul a:hover {
width:140px;
background:#E0E0E0;
font-size:1em;
color: black;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu2 ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:140px;
}
/* another hack for IE5.5 */
* html .menu2 ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.menu2 ul ul ul {
left:160px;
top:0;
width:140px;
}
/* position the third level flyout menu for a left flyout */
.menu2 ul ul ul.left {
left:-140px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu2 table { margin:0; padding:0 0px 0px 0px; position:absolute; top:0; left:0; /*Make the container moveable*/ }
/* style the second level links */
.menu2 ul ul a, .menu2 ul ul a:visited {
background:#F1F1F1;
font-size:1em;
font-weight:normal;
color:#000000;
height:auto;
line-height:1em;
padding:5px 10px;
width:140px /* yet another hack for IE5.5 */;
}
* html .menu2 ul ul a {
width:140px;
w\idth:140px;
}
/* style the top level hover */
.menu2 a:hover {
color:#000000;
background:#F1F1F1;
font-size:1em;
}
.menu2 :hover > a {
color:#000000;
background:#F1F1F1;
font-size:1em;
}
.menu2 ul ul a:hover {
color:#000000;
background:#D7D7D7;
font-size:1em;
}
.menu2 ul ul :hover > a {
color:#000000;
background:#D7D7D7;
font-size:1em;
}
/* make the second level visible when hover on first level list OR link */
.menu2 ul li:hover ul, .menu2 ul a:hover ul { visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu2 ul :hover ul ul { visibility:hidden; }
/* make the third level visible when you hover over second level list OR link */
.menu2 ul :hover ul :hover ul { visibility:visible; }


Werbung


Achtung!

Wenns im IE (wo sonst) Probleme geben sollte, sind ein paar Sachen zu beachten:

  1. HTML Cleaner (htmlclean, Tidy etc )entfernen die Conditional Comments für den IE, sollten das aber natürlich nicht tun, sonst kanns ja nicht klappen.
    • Quelltext Prüfen!
  2. der IE darf nicht im Quirksmode sein

Danke an die Geeks vom Xhtmlforum und den einen anonymen Formularausfüller 🙂

CR 18.10.2010