CODEWITHSUNDEEP
jquerymenudrop-down-menusubmenu
Anonymous
Anonymous

Reputation: 553

Using JQuery to handle submenus

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.

Upvotes: 1

Views: 2628

Answers (3)

Shawn31313
Shawn31313

Reputation: 6052

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!

Upvotes: 2

Tats_innit
Tats_innit

Reputation: 34117

Working Demo http://jsfiddle.net/QYEWs/

Since you have not mentioned anything about Jquery code you are using use the code mentiond in jsfiddle.

The working demo should help.

This is good place to start with Jquery http://jquery.com/

Code

// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();

// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
    over: function(){
        // Find the hovered menu's sub-menu
        var $submenu = $(this).find('.sub-menu');

        // Stop the animation and fade out the other submenus
        $('.sub-menu').not($submenu).stop(true,true).fadeOut(260);

        // Fade in the current one
        $submenu.fadeIn(260);
    }
});

// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
    // Fade out all inactive submenus
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);

    // Fade in the active one
    $('.current-menu-parent .sub-menu').fadeIn(260);
});​

Upvotes: 0

DA.
DA.

Reputation: 40697

To get it to show (Assuming you already have the submenu hidden) you could do something like this

$('.navlink').hover(function(){
   $(this).siblings('submenu').show();
})

The catch is that you don't want to hide it when leaving the navlink, because you have to leave the navlink to get to the submenu. So you likely have to attach the hiding part to the parent LI.

Also you'll need to consider devices that aren't using mice...such as keyboards and touch devices.

Upvotes: -1

Related Questions