Question

I am trying to make the smallest menu with submenus possible. So far, here is my code:

<div id="ctl100_cphHeader_NavigationBar">
    <li></li> <!-- makes first left-border in css -->
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li>
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li>
    <li>
        <a class="navlink" href="/ComingSoon.aspx">N/A</a>
        <div class="submenu">
            <a class="navlink" href="/">Home</a>
            <a class="navlink" href="/">Home</a>
        </div>
    </li>
    <li>
        <a class="navlink" href="/ComingSoon.aspx">N/A</a>
        <div class="submenu">
            <a class="navlink" href="/ComingSoon.aspx">Coming Soon</a>
        </div>
    </li>
</div>

I am wanting to use jquery to make it so on $(‘.navlink’).mouseenter() any submenus under it will appear, and on $(‘.navlink’).mouseleave() any submenus under it will disappear.
How would I go about this? I am new to jquery and not good with selectors.

Answer 1

Try the following script:

$(document).ready(function () { 
    var speed = 500;//The speed is in milliseconds 
    $('li').hover(function () {
         //show its submenu
         $(this).children('.submenu').stop().slideDown(speed);
        },
        function () {
         //hide its submenu
         $(this).children('.submenu').stop().hide(speed);      
     });
});​

I just used the hover function, the first function(){... is the onMouseEnter and the second function(){... is the onMouseLeave. Also remember that the submenu’s need to bedisplay:none.

You can do this with javascript by adding the following code to the top of the previous one:

$('.submenu').hide();

I recommend using the CSS to hide them though:

.submenu{
  display:none
}

You don’t need to add that extra function in the JavaScript.

Check out the JSfiddle so see this code in action!