Show/Hide cascading menu while hovering element

Question

I need to show/hide a cascading menu when the user move the mouse on a certain element. This is quite easy to achieve with jquery, using the hover function:
N.B: The timer is used only to hide the menu after 200ms, and is not important.

$(document).ready(function() {
    var timer;
    $('.element,.cascading_menu').hover(function(){
        clearTimeout(timer);
        $('.cascading_menu').show();
    }, function(){
        timer = setTimeout(function(){$('.cascading_menu').hide();},200);
    });
});

I have to repeat this code for every menu I want to hide.
But since I have a lot of menus, I would like to reduce the code length.

My idea was to use an array of "id of element hovering:id menu to show/hide".
Do you think it is possible to write a jQuery function that, given this array of elements, provide to show each menu, without having to write that code a dozen of times?

Answer 1

You can use this so you can use the same code for all the elements, but it all depends on you html code formatting.

Here is an example.

$(document).ready(function() {
    $('.element').hover(function(){
        $(this).find(".cascading_menu").stop().slideDown();
    }, function(){
        $(this).find(".cascading_menu").delay(200).slideUp();
    });
});

Note: You can also use delay(ms) instead of a timer.

Answer 2

I would set it up like this, which will work for menus with depth, provided each <li class="hoverli"> with a submenu has a submenu that is an unordered list (<ul class="file_menu">). It is important to pass a duration (i.e., zero) to .hide() or .delay() will not work, as it doesn't use the effects queue without a set duration.

HTML:

<div id="button">
    <ul class="hover">
        <li class="hoverli">Hover over me!
            <ul class="file_menu">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>                
            </ul>
        </li>
        <li class="hoverli">or me!
            <ul class="file_menu">
                <li class="hoverli">submenu!
                    <ul class="file_menu">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                    </ul>
                </li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>                
            </ul>
        </li>
    </ul>
</div>

JavaScript:

$(".hoverli").hover(function(){
    $(this).find("ul").show();
}, function(){
    $(this).find("ul").delay(200).hide(0);
});

CSS:

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}
.menu_class {
    border:1px solid #1c1c1c;
}
.file_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}
.file_menu li {
    background-color: white;
}

Answer 3

Here is a good example of a "Windows 7" style cascading menu Fiddle

$(function(){
    $('.hasDropdown').hover(function(){
        $(this).find('ul:first').show();
    },function(){
        $(this).find('ul').hide();
    })

});

it will cascade infinitely deep :-) in theory

Answer 4

Thanks very much for your answers. At the end I wrote this code, that works quite well. The problem was that the elements to show weren'e sons of the element hovered, so I creted two array, one with the element hovering, and the other with the element to show, and combined all with the $.each function. Here is the code:

    $(document).ready(function() {

        var timer;
        var h1=["prof","notif_cont","explo"];
        var h2=[".profile",".notification",".explore"];
        $('.hover').hover(
            function(){
                var hoverrato=$(this).children(':first');
                $.each(h1, function(indice,checker){
                    if($(hoverrato).hasClass(checker)){
                        var index_hov=indice;
                        ul_show=h2[index_hov];
                        clearTimeout(timer);
                        $(ul_show).show(65);
                    }
                });

            },
            function(){
                timer = setTimeout(function(){$(ul_show).hide(65);},200);
            });

});