Hallo,
ich möchte das Menü typo3.intervation.de/snippets/menues/the-ultimate-css-only-drop-down-menu.html derart anpassen, dass es auch für 4 oder mehrere Ebenen funktioniert.
Mein TYPO3-Script sieht momentan wie folgt aus:
temp.menucss = HMENU
temp.menucss {
excludeUidList = 41,80,23,53,65,83,81,45
#,89,47
special = directory
# Hier die Start-ID angeben
special.value = 20
wrap = <div class="menu_css"> | </div>
# 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 = class=dropact
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class=dropact
}
2 = TMENU
2 {
wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></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 = class=drop
}
ACT < .NO
ACT = 1
ACT.ATagParams = class=dropact
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class=dropact
}
3 < .2
4 < .2
# 5 < .2
}
Die CSS-Datei habe ich etwas abgeändert und unten ergänzt:
######
#
# Snippets by http://typo3.intervation.de/index.php?id=1
#
####
.menu_css {
width:750px;
font-size:0.85em;
position:relative;
z-index:100;
background:#758279;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu_css ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu_css ul ul {
width:137px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu_css li {
float:left;
width:137px;
position:relative;
}
/* style the links for the top level */
.menu_css a, .menu_css a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:126px;
height:20px;
border:1px solid #fff;
border-width:1px 1px 0 0;
/*background:#758279;*/
background:#f0881f;
/*f0881f;75827,e43c179*/
padding-left:10px;
line-height:19px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu_css a, * html .menu_css a:visited {
width:137px;
w\idth:137px;
}
/* style the second level background */
.menu_css ul ul a.drop, .menu_css ul ul a.drop:visited {
background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the second level hover */
.menu_css ul ul a.drop:hover{
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu_css ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.menu_css ul ul ul a, .menu_css ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu_css ul ul ul a:hover {
background:#b2ab9b;
}
/* style the *fourth* level background */
.menu_css ul ul ul ul a, .menu_css ul ul ul ul a:visited {
background:#a2dfa8;
}
/* style the *fourth* level hover */
.menu_css ul ul ul ul a:hover {
background:#a2ab9b;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu_css ul ul {
visibility:hidden;
position:absolute;
height:0;
top:21px;
left:0;
width:137px;
}
/* another hack for IE5.5 */
* html .menu_css ul ul {
top:30px;
t\op:31px;
}
/* hide the *4* sub levels and give them a positon absolute so that they take up no room */
.menu_css ul ul ul {
visibility:hidden;
position:absolute;
height:0;
top:21px;
left:0;
width:137px;
}
/* another hack for IE5.5 */
* html .menu_css ul ul ul {
top:30px;
t\op:31px;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu_css ul ul ul ul {
visibility:hidden;
position:absolute;
height:0;
top:21px;
left:139px;
width:137px;
}
/* another hack for IE5.5 */
* html .menu_css ul ul ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.menu_css ul ul ul{
left:137px;
top:0;
width:137px;
}
/* position the third level flyout menu for a left flyout */
.menu_css ul ul ul.left {
left:-137px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu_css table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu_css ul ul a, .menu_css ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:117px
/* yet another hack for IE5.5 */
}
* html .menu_css ul ul a{
width:137px;
w\idth:129px;
}
/* style the top level hover */
.menu_css a:hover, .menu_css ul ul a:hover{
color:#fff;
/*f0881f;*/
background:#949e7c;
background:#e43c17;
}
color:#000;
.menu_css :hover > a, .menu_css ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* make the second level visible when hover on first level list OR link */
.menu_css ul li:hover ul,
.menu_css ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu_css ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu_css ul :hover ul :hover ul{
visibility:visible;
}
/* keep the *fourth* level hidden when you hover on first level list OR link */
.menu_css ul ul ul ul :hover ul :hover ul{
visibility:hidden;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu_css ul :hover ul :hover ul :hover ul{
visibility:visible;
}
Ich habe das Problem, dass wenn ich auf der zweiten Ebene bin, jeweils die 3. und 4. Ebene zusammen mitaufklappt, sodass alle Punkte bei der Ebene 4 aufklappen und es dann zu überschneidungen auf der 4. Ebene kommt. Ich möchte aber die 4. Ebene als Rollover der 3. Ebene aufklappen lassen. Der Fehler steckt hier irgendwo im CSS-File. Sieht irgendjemand den Fehler? Das Problem kann unter http://www.applied-biometrics.com nachvollzogen werden.
Viele Grüße
Gerik