animated submenu

Discussion in 'Scripts' started by davymeykens, Oct 25, 2011.

to remove all ads.
  1. davymeykens

    davymeykens New Member

    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){


    if($(this).parent().next('.nsub').is(':hidden')) {

    } else {




    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!!
  2. leroy30

    leroy30 New Member

    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 {cursor:pointer;background:white;}
    .services li:hover {background:blue;}


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


    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 :eek:)

  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Love the :p in that one leroy!
  4. che09

    che09 New Member

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

Share This Page