Hallo,
ich habe ein horizontales Dropdownmenü bei dem in Level 1 ein GMenu ist. Der Rest ist ein Textmenü.
Wenn ich nun mit der Mouse drüber fahre erscheint das RO Bild, aber wenn ich darunter ins Textmenü fahre deaktiviert sich das RO oben.
Wie kann ich das RO auch beibehalten wenn ich in den Untermenüs bin.
Viele Grüß
Tom
Hallo Tom,
meine Kristallkugel sagt mir, es wäre sehr hilfreich, wenn du den aussgegebenen HTML-Code dahingehend anpasst,
das auch bei Hover über das Untermenu das Menü darüber nicht verlassen wird.
Und das CSS muss natürlich auch entsprechened sein.
Beispiele wie man so etwas macht findet man im Internet zuhauf,
z.B. bei CSSPlay von Stu Nicholls
Hallo Chrissli,
danke für deine Antwort. Mein Menü wird aber per Gifbuilder erstellt (Level 1) und per Javascript der RO Effekt umgesetzt. Level2 +3 sind wieder ganz normale Textmenüs.
Kann man auf das generierte Script (onmouseover ...) zurgreifen und für die weiteren Ebenen evtl. wiederverwenden? Ich müsste ja nur den Namen der RO Grafik auslesen können. Dann kan ich das per Javascript wieder ändern.
Ich habe es auch schon mit IFSUB, IFSUBRO usw. versucht wieder das RO Bild zu setzen. Geht aber nicht. Ich denke mit reinem CSS komme ich da nicht weiter.
Viele Grüße
Tom
Hi Tom,
was ich mit der "Kristallkugel" sagen wollte ist:
Wenn man das nur ganz theoretisch im Kopf aushandeln muss ist das
leider nicht ganz einfach, wenn nicht sogar sehr schwer. 🙂
Kannst du vielleicht etwas von deinem TypoScript posten?
Das wäre sehr hilfreich.
Hallo Chrissli,
hier mein TS:
lib.field_menue = HMENU
lib.field_menue {
wrap = <div class="menu">|</div>
special = directory
special.value = 13
# Hauptmenue
1 = GMENU
1 {
wrap = <ul class="menu"> | </ul>
expAll = 1
NO=1
IFSUBRO=1
NO {
ATagTitle.field = subtitle//title
wrapItemAndSub = |</li><img src="fileadmin/menue_trenner.gif" border="0"> |*| |</li><img src="fileadmin/menue_trenner.gif" border="0"> |*| |
allWrap = <li class="inner"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
backColor = #004b8d
transparentBackground = 0
transparentColor.closest=1
transparentColor=#004b8d
XY = [10.w]+30, 40
10=TEXT
10 {
text.field=title
offset=0,25
fontColor = #ccdce9
niceText=0
fontFile=fileadmin/fonts/arial.ttf
fontSize=17
align = center
antiAlias = 1
}
}
CURIFSUBRO <.NO
CURIFSUBRO.5 = IMAGE
CURIFSUBRO.5.file = fileadmin/menue_hover.gif
CURIFSUBRO =1
IFSUBRO < .NO
IFSUBRO.5 = IMAGE
IFSUBRO.5.file = fileadmin/menue_hover.gif
IFSUBRO=1
# IFSUBRO < .NO
# IFSUBRO.5.file = fileadmin/menue_hover.gif
# IFSUB=1
RO < .NO
RO.5 = IMAGE
RO.5.file = fileadmin/menue_hover.gif
RO.10.fontColor=#FFFFFF
RO=1
ACT < .NO
ACT.5 = IMAGE
ACT.5.file = fileadmin/menue_hover.gif
ACT.10.fontColor=#FFFFFF
ACT =1
}
# 2. Ebene
2 = TMENU
2.expAll = 1
2.wrap = <ul class="level2"> | </ul>
2.NO {
ATagTitle.field = subtitle//title
wrapItemAndSub = | </li>
allWrap = <li class="inner2"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
# 3. Ebene
3 = TMENU
3.wrap = <ul class="level3" > | </ul>
3.NO {
ATagTitle.field = subtitle//title
wrapItemAndSub = | </li>
allWrap = <li class="inner3"> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
# 4. Ebene
4 = TMENU
4.wrap = <ul class="level4"> | </ul>
4.NO.allWrap = <li class="inner4"> |
4.NO {
ATagTitle.field = subtitle//title
wrapItemAndSub = | </li>
allWrap = <li class="inner4> |
allStdWrap.insertData = 1
linkWrap = |
ATagBeforeWrap = 1
}
}
CSS:
div.menu img {
float:left;
}
ul.menu {
position:relative;
}
ul.menu, ul.menu ul {
list-style-type: none;
}
ul.menu a {
display: block;
font-weight: bold;
text-decoration:none;
font-size:11px;
color:#363636;
}
ul.menu li {
padding: 0;
margin: 0;
float: left;
}
/* Für Unterpunkte keine Float-Eigenschaft */
ul.menu ul li {
float:none;
margin:10px;
}
.menu ul.level3 a {
color:#8d8d8d;
}
/* Zweite Ebene */
ul.menu ul.level2 {
margin:0;
padding: 10px;
position: absolute;
display: none;
width: 200px;
z-index:999;
background-color:#eee;
top:40px;
}
/* Zweite Ebene anzeigen */
ul.menu li.hover ul, ul.menu li:hover ul {
display: block;
}
/* Dritte Ebene anzeigen */
ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
display: block;
}
/* Vierte Ebene anzeigen */
ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
display: block;
}
Ich habe meine Versuche mit IFSUBRO usw. drin gelassen. Die zweite Ebene ist ein Text Dropdownmenü.
Per jQuery füge ich bei Hover jeweils die Klasse hover an.
$(document).ready(function(){
$("ul.menu li").hover( function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); } ); });
}
Danke für deine Hilfe.
Viele Grüße
Tom