Hallo an alle!
Weil die Layer-Positionierung ein paar Probleme bereitete, habe ich versucht, das Layer-Menü als Kombination eines TMENUs und CSS zu erstellen.
Doch leider erscheinen die Layer nicht!!! 🙁
Weiß jemand einen Rat??
NAVIOBEN = HMENU
NAVIOBEN {
special = directory
special.value = 5
1 = TMENU
1 {
expAll=1
wrap = <ul id="menu_oben">|</ul>
NO = 1
NO.wrapItemAndSub = <li class="split1">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="split1">|</li>
}
## Definition von Ebene 2 (Textmenü):
2 = TMENU
2 {
expAll=1
wrap = <ul class="layer_wrap">|</ul>
NO = 1
NO.wrapItemAndSub = <li class="layer_wrap">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="layer_wrap">|</li>
# Ende Ebene2
}
}
#menu_oben { margin-top:196px; }
#menu_oben ul { list-style:none; margin:0px; padding:0px; }
#menu_oben ul a { display:block; float:left; }
#menu_oben li { font-weight:bold; float:left; position:relative; display:block; }
.split1 { width:110px; height:22px; text-align:center; border-right:2px solid #999999;}
/** Gestaltung der herunterfallenden Layer **********************/
.layer_wrap { display:none; width:188px; height:25px; background-color:#EEEEEE; border-bottom:1px solid #FFFFFF; }
.layer_wrap a { display:none; color:#444444; text-decoration:none; }
.layer_wrap a:hover { display:block; color:#00467f; }
Danke vielmals im Voraus
Annna
Moin,
deine Klasse .layer_wrap steht doch auf display:none. Diese müsste mit einem entsprechenden :hover so wie die Links auch auf display:block bzw. inline sichtbar gemacht werden.
Grüßle!
Hallo hwt!
Danke für die schnelle Antwort.
Entschuldige bitte, dass ich mich so doof anstelle, :o :o aber
ich habe doch in Zeile 10 geschrieben
layer_wrap a:hover { display:block; color:#00467f; }
Ich habe es mal versucht mit:
layer_wrap :hover { display:block; color:#00467f; }
Laut CSS-Theorie soll dies zwar nur IE <7 u. Opera nicht kennen, klappte aber auch bei FF nicht.
Ich wäre Dir für ein wenig Code wirklich dankbar!!! 😃 [/quote]
Vielen Dank im Voraus
Annna
Hi Annna!
Also, mit
layer_wrap a:hover { display:block; color:#00467f; }
wird ja nur der Link wieder sichtbar. Deine ul und li mit .layer_wrap bleiben jedoch weiter unsichtbar.
Dass
layer_wrap :hover { display:block; color:#00467f; }
nicht funktioniert könnte daran liegen, dass evtl. Pseudoklassen nicht auf Klassen angewendet werden. Bin mir da aber nicht ganz sicher. (Ich gehe mal davon aus, dass du den Punkt vor der Klasse nur beim Posten vergessen hast.)
Ich habe das bei mir in folgender Art gelöst und das 'display' direkt auf die Liste der zweiten Ebene angewendet:
/*Menü auf zweiter Ebene unsichtbar*/
#menu_oben li ul {display:none;}
/*Menü auf zweiter Ebene mit :hover anzeigen*/
#menu_oben li:hover ul {display:block;}
Deine Links bräuchtest du dann eigentlich auch nicht mehr mit display:none; zu verstecken, da sie sich innerhalb der (nicht) angezeigten li und ul befinden und damit auch (nicht) angezeigt werden.
Ich hoffe, dass hilft dir weiter.
Viele Grüße!
Hallo hwt!
Danke vielmals, dass Du mir noch einmal so schnell geholfen hast.
Mein CSS sieht nun also so aus:
/** Horizontales Menu ***********************************/
#menu_oben { margin-top:196px; }
#menu_oben ul { list-style:none; margin:0px; padding:0px; }
#menu_oben ul a { display:block; float:left; }
#menu_oben li { font-weight:bold; float:left; position:relative; display:block; }
#menu_oben li ul {display:none;}
#menu_oben li:hover ul {display:block;}
.split1 { width:110px; text-align:center; border-right:2px solid #999999;}
/** Gestaltung der herunterfallenden Layer **********************/
.layer_wrap { display:block; width:188px; background-color:#EEEEEE; border-bottom:1px solid #FFFFFF; }
.layer_wrap a { display:block; color:#444444; text-decoration:none; }
.layer_wrap a:hover { display:block; color:#00467f; }
Ergebnis:
FF: super!!!
Opera: super!!!!
IE 7.0: spielt leider nicht mit! Nix!!
So kann es noch nicht bleiben. Doch ich weiss mir leider keinen Rat. 🙁
Viele Grüße
Annna
Hmm, das war mir nicht bewusst, dass der IE 7 das noch nicht unterstützt. Vom IE 6 wusste ich es und habe deshalb dafür ein wenig JS eingesetzt.
Ich poste den Code am WE nochmal, muss jetzt leider noch zu einem Termin.
Viele Grüße und schönen Feierabend!
So hier noch die Nachlieferung des JS für den IE
Folgendes JS habe ich bei mir eingebunden:
function startMenu () {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu_oben");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" navOver";
}
node.onmouseout=function() {
this.className=this.className.replace(" navOver", "");
}
}
}
}
}
Gestartet wird das beim Laden des Body.
<body onload="javascript:startMenu()">
Die Klasse .navOver ist im css auch mit der :hover-Formatierung versehen:
/*Menü auf zweiter Ebene mit :hover anzeigen*/
#menu_oben li:hover ul, #menu_oben li.navOver ul {display:block;}
Grüße
hwt