XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   IE6 Submenü Problem - WICHTIG! (http://xhtmlforum.de/showthread.php?t=54619)

infernalshade 20.11.2008 09:15

GELÖST: IE6 Submenü Problem - WICHTIG!
 
Hallo Leute!

Erstmal der Code, dann sag ich euch was passiert:

Das Navigationsmenü:
HTML-Code:

<div class="mod_navigation block" id="nav">
<ul class="level_1">
<li class="active submenu first"><span class="active submenu first">BIO WAGYU</span><ul class="level_2">
<li  class="active first"><span class="active first">Bio Wagyu</span></li>
<li  class="last"><a href="ueber-wagyu.html" title="Über Wagyu" class="last" onClick="this.blur();"><span>Über Wagyu</span></a></li>
</ul>
</li>
<li  class="submenu"><a href="ueber-uns.html" title="Über uns" class="submenu" onClick="this.blur();"><span>ÜBER UNS</span></a><ul class="level_2">

<li  class="first"><a href="ueber-uns.html" title="Über uns" class="first" onClick="this.blur();"><span>Über uns</span></a></li>
<li  class="last"><a href="ueber-schergengrub.html" title="Über Schergengrub" class="last" onClick="this.blur();"><span>Über Schergengrub</span></a></li>
</ul>
</li>
<li><a href="gallerie.html" title="Gallerie" onClick="this.blur();"><span>GALLERIE</span></a></li>
<li><a href="referenzen.html" title="Referenzen" onClick="this.blur();">KUNDEN REFERENZEN</a></li>
<li><a href="links.html" title="Links" onClick="this.blur();"><span>LINKS</span></a></li>
<li  class="last"><a href="kontakt.html" title="Kontakt" class="last" onClick="this.blur();"><span>KONTAKT</span></a></li>
</ul>
</div>

Das CSS (Ich weis, der Code ist ziemlich durcheinander und evtl falsch, das kommt aber vom rumprobieren das ich schon die ganze Zeit mache!):
HTML-Code:

#nav
{
        left:-575px;
        top:40px;
        position:absolute;
        font-size:11px;
        z-index:999;
        *top:50px;
        overflow:visible !important;
}

#nav a,
#nav span
{
        display:block;
}

#nav ul
{
        list-style-type:none;
}


#nav li
{
        width:86px;
        margin-right:2px;
        text-align:center;
        background-image:url("tl_files/wagyu/img/nav-button-bg.jpg");
        background-repeat:no-repeat;
        float:left;
}

#nav li a
{
        color:#ffffff;
}

#nav li a:hover
{
        color:#ffa9ac;
}

#nav span.active
{
        color:#ffa9ac;
}

#nav ul ul
{
        visibility:hidden;background:#333333;position:absolute;top:44px;
        *border:5px solid green;
}

* html #nav ul ul
{
        margin-left:-50%;
}

*+html #nav ul ul
{
        margin-left:-100px;
}

#nav li:hover ul
{
        visibility:visible;
}

#nav ul ul li
{
        background:none;margin-left:-35px;margin-right:30px;width:116px;
        *margin-left:0px;*margin-right:0px;
}

#nav ul ul li span,
#nav ul ul li a
{
        text-align:left;float:left;line-height:20px;
}

Ok, also das Untermenü klappt wunderbar auf im Firefox und Co anhand diesen CSS-Stilen:
HTML-Code:

#nav ul ul
{
        visibility:hidden;background:#333333;position:absolute;top:44px;
        *border:5px solid green;
}

und
HTML-Code:

#nav li:hover ul
{
        visibility:visible;
}

Jedoch nicht im IE6! Aus diesem Grund hab ich bisher immer dieses Javascript verwendet, das es auch im IE6 zum funktionieren bringt:
HTML-Code:

/* IEFIX */
if(window.ie6 || window.ie7)
{       
        window.addEvent('domready',function(){
                $$('#nav li').each(function(el,cnt){
                        if(el.getParent().hasClass('level_1') && el.getElement('ul'))
                        {
                                el.submenue = el.getElement('ul');
                               
                                el.addEvent('mouseover',function(){
                                        this.submenue.setStyles({
                                                'visibility': 'visible'
                                        });
                                });
                                el.addEvent('mouseout',function(){
                                        this.submenue.setStyles({
                                                'visibility': 'hidden'
                                        });
                                });
                        }
                });
        })
}

Das Script funktioniert auch ganz gut, nur folgendes passiert mir jetzt beim IE6:

Wenn ich mit der Maus über den TEXT-Hyperlink fahre erscheint das Submenü, aber sobald ich nur 1px ausserhalb des Hyperlink-Textes bin verschwindet das Submenü wieder!

Das gleiche Script hab ich z.b. auch auf dieser Seite verwendet. Dort ist es so wenn ich über das <li> fahre (und nicht über den Hyperlink-Text) erscheint das Submenü und das schließt sich erst wieder wenn ich einmal mit der Maus im Submenü war und es dann wieder verlasse...

Was mach ich falsch, was hab ich anders gemacht!?

Bitte helft mir, die Seite ist sehr wichtig und sollte heute noch fertig werden!
Wär super wenn mir da jemand helfen könnte...

Grüße,
infernalshade

andir 20.11.2008 09:59

Zitat:

Das gleiche Script hab ich z.b. auch auf dieser Seite verwendet. Dort ist es so wenn ich über das <li> fahre (und nicht über den Hyperlink-Text) erscheint das Submenü und das schließt sich erst wieder wenn ich einmal mit der Maus im Submenü war und es dann wieder verlasse...
Funktioniert in meinem IE6 nicht. Ist allerdings die Standalone-Variante, was Probleme mit dem JS Code bedeuten könnte. Da hovert übrigens auch nicht das gesamte li im IE6, sondern nur der Link.

Was mir daher als erstes einfällt, ist, dass Du nav a und nav span nicht 100% Breite gegeben hast ( oder pos. relative)

Das hilft auch beim IE 6 den hoverbaren Bereich über den Inhalt des li's auszudehnen.

Ansonsten schau Dir doch mal folgendes Klappemnü mit suckerfish an:

Son of Suckerfish Dropdowns | HTML Dog

infernalshade 20.11.2008 10:12

Achja, hab vergessen was zu sagen:

Das stimmt das bei der Hotel-Seite das Sub nur aufklappt wenn man über den Text fährt - das ist bei mir genauso - jedoch geht das erst dann wieder weg (also das Sub) sobald ich mindestens EINMAL im Subfeld (Also ich <ul> <ul>) war und es wieder verlasse!

Der Unterschied zwischen der jetzigen Site und der Hotel-Seite ist folgender:

Bei der Hotelseite fährt man im IE6 über den Hyperlink-Text und das Menü klappt auf und geht erst weg wenn man das Submenü mit der Maus einmal "befahren" hat und dann wieder rausfährt aus dem Submenü

Bei der jetzigen Seite geht beim überfahren des Hyperlink-Textes ebenfalls das Submenü auf, jedoch geht das sofort wieder weg wenn ich von dem Text runterkomme!

@VuuRWerK: Ja aber wieso funktionierts bei der Hotel-Seite?!

infernalshade 20.11.2008 11:38

So ich habs genau so gemacht wie auf dem Suckerfish Tutorial, deren Script funktioniert fast so wie meins.

Leider besteht aber mit der Suckerfish Methode DAS GLEICHE Problem weiterhin :? Komisch ist das...

infernalshade 20.11.2008 12:10

Hab was rausgefunden...
Wenn ich auf das #nav li einen border lege, dann geht das Submenü auch bei überfahren des Borders auf! Dann also bei Überfahren des Textes und des Borders...dazwischen nicht...Wenn ich mehr weis meld ich mich wieder, vllt kann ich anderen mit dieser (Mit Sicherheit schon bald gefundenen) Erkenntnis helfen :)

infernalshade 20.11.2008 14:58

hatte ich auch probiert, bringt nix, jedoch komm ich der lösung näher:

ich hatte vorher als schatten der navi-leiste einen absolute positionierten layer dahinter, also hinter dem navigations-balken...der beinhaltet eine transparente png-grafik mit dem schatten und DAS passt dem IE anscheinend nicht...weis gott warum...ganz hauts noch nicht hin aber ich halt euch aufm laufenden!

EDIT:
Ok ich habs rausgefunden

Hier die Lösung für die, die das gleiche oder ein ähnliches Problem wie ich haben:

- Die Navigation darf NICHT aus dem Eltern-Element rausragen (z.b. durch position:absolute), die Navigation muss stets innerhalb des Elternelements sein
- Hinter der Navigation darf KEIN anderer Layer liegen, der absolute positioniert wurde (Selbst dann nicht, wenn dieser einen niedrigeren z-index hat)

Viel Glück!

Und auf jeden Fall vielen Dank Leute für eure Lösungvorschläge, super Forum hier! :)

Grüße,
infernalshade


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023