davymeykens

I'm making an animated submenu with javascript. and everything is working fine so far. But as i'm still learning, I can not find the solution for displaying the submenu.

my code is like this:

<script type="text/javascript">



$(document).ready(function() {
$('.nsub').hide(); // hide sub-navigation items by default

$('.nitem a').live('mouseover , mouseout', function(e){
e.preventDefault()



$(this).parent().next('.nsub').slideToggle('slow') ;




if($(this).parent().next('.nsub').is(':hidden')) {
$(this).addClass("CurrentlySelected");

} else {
$(this).removeClass("CurrentlySelected");
}




});


});

</script>


the "nsub" stands for the submenu, and the "nitem" for a menu button.
as you can see in the code, the submenu pops open when i move the mouse over a menubutton. but immediately dissapears when I move the cursor away.

what I want is, that the submenu stay's visible ofcourse while i'm navigating in the menu. But I want it to dissapear when I clicked a button, OR move my cursor away from the menu.
Also only 1 submenu should be open at a time (I have more than one button with a submenu)

I hope this is all clear, and I hope someone can help me fast.

thank you!!

leroy30

Have you considered doing a CSS drop-down menu? You will find it a safer option if people have javascript turned off you will still be able to navigate your website easily.

Do a google search for css drop down menu.

Otherwise I'd pay attention to the onclick, onblur, onmouseover and onmouseout events of the menu items. For example if all menu items have a class called "menuItem" then onclick of any item do this - $('.menuItem').hide() to hide all menu items.

Well, that is basically how you'd do it. You might need to tailor it for your specific menu.

What I normally do is have a parent DIV element for the drop down menu and all its contents. For example a "Services" menu item might be structured like this..

<style type="text/css">
.services {height:25px;overflow:hidden;width:200px;line-height:25px;}
.services li {cursorointer;background:white;}
.services li:hover {background:blue;}
</style>

...

<div class="services" onmouseover="$('services').stop().animate({ height: 75 }, 500);" onmouseout="$('services').stop().animate({ height: 25 }, 500);">
<ul>
<li>Services</li>
<li><a href="">Website Design</a></li>
<li><a href="">Logo Design</a></li>
</ul>
</div>

...

I haven't debugged that but that is basically how you would do it.

Good luck and please contribute to these forums by helping someone else if you can )

Le-roy

__________________
DVI web design | Portable Time Clock

Phreaddee

Love the in that one leroy!

__________________
if (headhurts == "possibly") {
alert ("keep going!");
}
else if (headhurts == "yes") {
alert ("go to sleep");
}
else if (headhurts == "damn !@#$ mofo scripts...") {
alert ("give up and have a beer!");
}
else {
alert ("watch TV");
}

che09

If I were you,I'll take this advice of Le-roy! He has a valid point there obviously!

__________________
FTP hosting