Js Drop Downs

JavaScript
1

Ive recently started expanding my learning into js ect and wanted to successfully get this to work.

This is where i am at:
Link

As you can see it appears to be working fine but when you move your mouse away from the drop down it doesn’t disappear. Its also a little slow the first time you mouseover and you see the text before the Bg of the sub nav (Im guessing this is because the image is loading during that time although im repeating an image that’s 430 bytes??)

Id also like to style it so that ‘gear’ stays in its hover state when you go through the sub nav but i am not sure if this can be done or how it can be done.

Heres my JS code

$(document).ready(function(){
    $("ul.topnav li").hover(
        function(){ $("ul", this).slideDown('fast'); }, 
        function() { } 
    );
    if (document.all) {
        $("ul.topnav li").hoverClass ("sfHover");
    }
});

$.fn.hoverClass = function(c) {
    return this.each(function(){
        $(this).hover( 
            function() { $(this).addClass(c);  },
            function() { $(this).removeClass(c); }
        );
    });
};

Please visit the live site for the css and html
Link

2

This should do the trick:


$(document).ready(function(){
    $("ul.topnav li").hover(
        function(){ $("ul", this).stop().slideDown('fast'); }, 
        function() { $("ul", this).stop().slideUp('fast'); } 
    );
    if (document.all) {
        $("ul.topnav li").hover( function() { $(this).toggleClass("sfHover"); });
    }
});

The stop() function stops all currect animations. This prevents that the menu will go up and down for a while when you go in and out of the li with your mouse really fast and then move your mouse away. Hard to explain… remove the stops(), move your mouse like crazy over the menu and see what happens :slight_smile:

PS. I removed the hoverClass function because this is just simpler :slight_smile:
Also, when you want to extend jQuery, please extend jQuery.fn, not $.fn (so you can still use jQuery.noConflict() if you want).
By extending jQuery.fn you can still call it like you did in your example, as $ is just a copy of jQuery.

PPS. The stop() command probably gives you problems that when a menu item is opening and you remove your mouse from the item, the next time you hover the item it doesn’t open all the way (stops at the point where you removed your mouse the last time). There are tricks to avoid this, but AFAIK jQuery 1.4.1 has this problem resolved. Might want to use that version instead of 1.3.1.

3

Great!!

Thank you so much!

4

try this - http://www.search-this.com/2009/03/17/jquery-dropdown-menu/

5

Thanks

Great solution