CODEWITHSUNDEEP
jquerydrop-down-menu
nikospap
nikospap

Reputation: 211

hover full width dropdown menu

Please, have a look at this: http://jsfiddle.net/2bU3R/3/

When I hover over the Magazine list, the first dropdown doesn't show.

I want it to work for many dropdowns.

$(document).ready( function(){
    $('#sub-menu-1').hover( function(event){
        event.stopPropagation();
        $(".sub-menu-1-open").slideDown("fast");
    });
    $('.sub-menu-1-open').mouseleave( function(){
        $('.sub-menu-1-open').slideUp("fast");
    });
    $('#sub-menu-2').hover( function(event){
        event.stopPropagation();
        $(".sub-menu-2-open").slideDown("fast");
    });
    $('.sub-menu-2-open').mouseleave( function(){
        $('.sub-menu-2-open').slideUp("fast");
    });
});

Upvotes: 0

Views: 353

Answers (3)

emerson.marini
emerson.marini

Reputation: 9348

UPDATE #2

If you keep the HTML markup the way it is now, this should work.

All the jQuery (Javascript) you need is this:

$(document).ready(function () {
    $("div[class^='sub-menu'] .inner").mouseleave(function () {
        hideMenu();
    });

    $(".list-inline li a").mouseenter(function () {
        hideMenu();
        $("." + $(this).parent().attr("id") + "-open").stop().slideDown();
    });
});

var hideMenu = function () { 
    $("div[class^='sub-menu']").stop().slideUp();
};

Demo: http://jsfiddle.net/2bU3R/22/

Upvotes: 1

Jonathan Römer
Jonathan Römer

Reputation: 628

You can try this make it somewhat a liitlebit more dynamic : http://jsfiddle.net/2bU3R/12/

$(document).ready( function(){
    $('.list-inline li').hover(function(){
        var div = $(this).attr('id');
        $('.'+div+'-open').slideToggle('fast');
    });
});

This basically runs itselfs.

Upvotes: 0

Prabhakaran Parthipan
Prabhakaran Parthipan

Reputation: 4273

Demo

Use slideToggle()

$(document).ready( function(){
        $('#sub-menu-1').hover( function(event){
            event.stopPropagation();        
            $(".sub-menu-1-open").slideToggle("fast");  


        });

        $('.sub-menu-1-open').mouseleave( function(){

            $('.sub-menu-1-open').slideToggle("fast");

        });

        $('#sub-menu-2').hover( function(event){

            event.stopPropagation();

            $(".sub-menu-2-open").slideToggle("fast");

        });

        $('.sub-menu-2-open').mouseleave( function(){

            $('.sub-menu-2-open').slideToggle("fast");

        });

});

Upvotes: 1

Related Questions