views:

39

answers:

1

Ok, let's say I have a navigation system constructed in nested divs and I want to show sub-menu divs (and sub-sub-menu divs) when I do a mouseover on the menu div AND hide sub-menu divs (and sub-sub-menu divs) on a mouseout, or more precisely, when I mouseover a different menu div.

What would be the best way?

So far, here's what I've got :

<script type="text/javascript">

$('.menu').mouseover(function(){ 
      $(this).children(".submenu").each(function(i){
        $(this).delay(1000).slideDown("slow");

$(this).mouseover(function(i){ 
$(this).children(".sub_submenu").each(function(i){
        $(this).delay(1000).slideDown("slow");

});
});
</script>


<div id="" class="menu">
menu1
<div id="" class="submenu">
submenu11
<div id="" class="sous_sousmenu">
sub_submenu111
</div>
<div id="" class="sub_submenu">
sub_submenu112
</div>
</div>
<div id="" class="submenu">
submenu12
</div>
</div>
<div id="" class="menu">
<a href="#">menu2</a>
<div id="" class="submenu">
sousmenu21
</div>
<div id="" class="submenu">
submenu22
<div id="" class="sub_submenu">
sub_submenu21
</div>
</div>
</div>

Right now, everything is working (showing sub-menu and sub-sub-menus) when I mouseover the proper menu div. Now, where/when/how should I tell the script to do a slideUp of all .submenu and .sub_submenu when I do a mouseover of a different .menu div?

Thanks

+1  A: 

Try something like this (demo):

HTML

<div id="" class="menu">
    menu1
    <div id="" class="submenu">
        submenu11
        <div id="" class="submenu">
            sub_submenu111
        </div>
        <div id="" class="submenu">
            sub_submenu112
        </div>
    </div>
    <div id="" class="submenu">
        submenu12
    </div>
</div>
<div id="" class="menu">
    <a href="#">menu2</a>
    <div id="" class="submenu">
        sousmenu21
    </div>
    <div id="" class="submenu">
        submenu22
        <div id="" class="submenu">
            sub_submenu21
        </div>
    </div>
</div>

Script

$('.menu, .submenu').hover(function(){
    $(this).children('.submenu').stop(true, true).slideDown("slow");
}, function(){
    $(this).children('.submenu').stop(true, true).delay(1000).slideUp("slow");
});
fudgey
Dear fudgey, you rock!
more
Now, the only thing still bugging me is that the ".sub-submenu" must have their own class... Is there a better way than spliting your script in two (one copy for the menu and submenu and one copy for the submenu and sub_submenu)?
more
Doh! Forget it, I will simply add the ".sub_submenu" class to the script...<pre><code>$('.menu, .submenu').hover(function(){ $(this).children('.submenu, .sub_submenu').stop(true, true).slideDown("slow");}, function(){ $(this).children('.submenu, .sub_submenu').stop(true, true).delay(1000).slideUp("slow");});</code></pre>
more
If you're not too attached to the `delay`, you can just do: `$('.menu, .submenu').hover(function(){ $(this).children('.submenu').stop(true, true).slideToggle("slow"); });` ------- Or use the `delay` in both directions, like in the original code... though I think that's a little odd.
Peter Ajtai
Thanks Peter, I'll do some testing to see if the <code>.delay</code> is mandatory but I kind of like the idea of being able to set different speed for the <code>slideDown</code> and <code>slideUp</code> functions. (Now, how can I set the tag [code][/code] in comments of this forum is a different thing...;)
more
Actually, the `delay` is needed because when you unhover from a submenu, it slidesup too fast to hover over another submenu in the same root. I updated the demo (http://jsfiddle.net/YBREN/1/)... now hover over submenu11, until it opens its children, now try to hover over submenu12.
fudgey
Totally right fudgey... Thanks! So the DELAY is mandatory. Plus, as mentioned earlier, it makes it possible to set different "speed" for the slideUp and slideDown. Thank you again, fudgey.(When i say "speed", I mean the overall effect, with the delay function!)
more