animated submenu

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

to remove all ads.
  1. davymeykens

    davymeykens New Member

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

    leroy30 New Member

    Messages:
    485
    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;}
    </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 :eek:)

    Le-roy
     
  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Love the :p in that one leroy!
     
  4. che09

    che09 New Member

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

Share This Page