Hach, ich liebe das, wo in anderen Foren der Tenor ein rauher ist und alle über schlechte Umgangsformen schimpfen - sollen Sie alle doch mal hier lesen!
Herzlich willkommen WolliWolke, auch Netzor nachträglich.
Ich bin derjenige, der hier oft Fragen beantwortet. In der Regel kann ich das auch, schliesslich bin ich Core-Developer. Allerdings kenn ich viele Extensions nicht, auch Flyout-Menüs sind nicht meine Stärke. Trotzdem geb ich mir Mühe fast alles irgendwie zu beantworten.
Ich hatte ein Projekt, wo ich Flyout-Menüs eingesetzt habe. Und, man mag es kaum glauben, auch hier war der IE das Problemkind. Dies liess sich auch nur mit JS lösen.
Das Menü sah dann so aus:
Code:
10 = HMENU
10 {
excludeUidList = 52
1 = TMENU
1 {
expAll = 1
wrap = <ul class="level1">|</ul>
NO = 1
NO {
stdWrap.field = nav_title//title
wrapItemAndSub = <li class="level1" onmouseover="this.className='level1 hover';" onmouseout="this.className='level1';">|</li>
stdWrap.case = upper
}
ACT = 1
ACT {
stdWrap.field = nav_title//title
wrapItemAndSub = <li class="level1act" onmouseover="this.className='level1act hover';" onmouseout="this.className='level1act';">|</li>
ATagParams = class="act"
stdWrap.case = upper
}
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO = 1
NO {
stdWrap.field = nav_title//title
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li><li class="last"><span class="lastleft"> </span><span class="lastright"> </span></li>
linkWrap = <span>|</span>
ATagBeforeWrap = 1
}
ACT = 1
ACT {
stdWrap.field = nav_title//title
wrapItemAndSub = <li id="act">|</li> |*| <li id="act">|</li> |*| <li id="act">|</li><li class="last"><span class="lastleft"> </span><span class="lastright"> </span></li>
linkWrap = <span>|</span>
ATagBeforeWrap = 1
}
}
}
}
und das CSS
Code:
#top_nav { font-size: 0.8em; line-height: 1.2em; color: #000; z-index:10000;}
#top_nav ul.level1 { list-style-type: none; height:auto; margin: 0;position: absolute; }
#top_nav ul.level1 li.level1, #top_nav ul.level1 li.level1act { float:left; display: block; z-index:10000; border-right:1px solid #ddd;min-width:120px; }
#top_nav ul.level1 li.lastl1 { border:none; }
#top_nav ul.level1 li { position: relative; min-height: 30px; }
#top_nav ul.level1 li.level1act { background: #2e2e2e; }
#top_nav ul.level1 li a { text-decoration: none; padding: 0.3em 1.6em; display: block; color:#646464!important; font-weight:bold; }
#top_nav ul.level1 li.hover { background:#2e2e2e !important; }
#top_nav ul.level1 li.hover a:hover { color:#eee !important; }