Dropdown Menü Problem

[dragingthelake]

Hallo zusammen!

Ich versuche momentan ein Dropdown- Menü mithilfe von jQuery zu erstellen. Jedoch läuft das Script im IE nicht so ganz wie es sollte. Auch fängt es in allen Browsern an zu blinken wenn man schnell darüber fährt.
Bin noch nicht so der Javascript Hengst darum wäre ich froh wenn mir da jemand sagen könnte wo der Fehler liegt.

gehts zum Menü.

Hier der Code:

function mainmenu(){
$(" #nav ul").css({visibility:"hidden"}); 
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show('fast');
		},function(){
		$(this).find('ul:first').css({visibility:"inherit",display:"inherit"}).fadeOut('fast', 0, function() {
      $(this).hide()});
		});
}

 
 
 $(document).ready(function(){					
	mainmenu();
});

Wäre cool wen das ganze mit .show ausfährt und mit einem .fadeOut wieder verschwindet.

Gruss
Damian

 

[cebito]

AW: Dropdown Menü Problem

Mach mal den Div aus der Liste raus, die class kannst direkt an die ul geben.

<ul id="nav">
    <li><a href="#">1 Lorem Ipsum</a></li>
    <li><a href="#">2 Lorem Ipsum</a></li>
    <li><a href="#">3 Lorem Ipsum</a>
    [COLOR=Red]<div class="sub">[/COLOR]
      <ul[COLOR=DarkGreen] class="sub"[/COLOR]>
            <li><a href="#">3.1 Lorem Ipsum</a>
              <ul>
                    <li><a href="#">3.1.1 Lorem Ipsum</a></li>
                    <li><a href="#">3.1.2 Lorem Ipsum</a></li>
              </ul>
            </li>
            <li><a href="#">3.2 Lorem Ipsum</a></li>
            <li><a href="#">3.3 Lorem Ipsum</a></li>
      </ul>
      [COLOR=Red]</div>[/COLOR]
    </li>
</ul>

 

[dragingthelake]

AW: Dropdown Menü Problem

hmm danke für die Antwort, ändert jedoch leider nichts.
Das Problem im IE ist einfach dass das .fadeOut nicht funktioniert... und das blinken...

 

[dragingthelake]

AW: Dropdown Menü Problem

Niemand eine Idee was ich falsch mache?

Wäre froh wenn mir jemand helfen könnte...
danke...

Gruss
Damian

 

[saila]

AW: Dropdown Menü Problem

Hi,

auf dein sub-Menü bezogen, kannst du zum einen das CSS-Attribut -> display: none;
setzen. Ansonsten ist dein Ansatz bzgl. jQuery schon fragwürdig. Zumal davon auszugehen ist, das du nicht vernüftig die Dokumentation gelesen hast.

Hier der HTML-Teil:

    <ul id="nav">
        <li><a href="#">1 Lorem Ipsum</a></li>
        <li><a href="#">2 Lorem Ipsum</a></li>
        <li><a href="#">3 Lorem Ipsum</a>
              <ul class="sub">
                <li><a href="#">3.1 Lorem Ipsum</a>
                      <ul>
                        <li><a href="#">3.1.1 Lorem Ipsum</a></li>
                        <li><a href="#">3.1.2 Lorem Ipsum</a></li>
                      </ul>
                </li>
                <li><a href="#">3.2 Lorem Ipsum</a></li>
                <li><a href="#">3.3 Lorem Ipsum</a></li>
              </ul>
        </li>
    </ul>

und hier das dazugehörige jQuery:

$(document).ready( function() {
    // kann entfallen, wenn für die Sub-UL über CSS display: none; gesetzt wird.
     $(function() {
         $('.sub').css('display','none');
     });
    
    // hover-Effekt
    $(function() {
        $('#nav > li').hover(
            function(){
                $(this).children('ul').show('slow');
            },
            function(){
                $(this).children('ul').hide('slow');
            }
        );
    });
});

 

[dragingthelake]

AW: Dropdown Menü Problem

Danke für deinen Vorschlag. Klappt eigentlich gut, nur wenn ich das ganze mit einem .fadeOut Effekt haben will scheiterts im IE.
Aber werde sonst mal selber versuchen noch daran rumzubasteln...

Gruss
Damian