Using JQuery to handle submenus

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.

Nathan · Accepted Answer · 2012-06-30 04:56:18Z

2

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!

edited Jun 30, 2012 at 4:56

Nathan

12k11 gold badges54 silver badges94 bronze badges

answered Jun 30, 2012 at 4:36

Shawn31313

6,0564 gold badges43 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anonymous Over a year ago

Thanks for the brief and simple answer. :)

Tats_innit · Accepted Answer · 2012-06-30 04:34:38Z

0

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);
});

answered Jun 30, 2012 at 4:34

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

2 Comments

Tats_innit Over a year ago

@Shawn31313 cool, I am guessing that OP is using .net user controllers and might need css etc with the menu, anyhoo cheers for comment :)

Shawn31313 Over a year ago

Yup, also why use hoverIntent?

DA. · Accepted Answer · 2012-06-30 04:34:00Z

-1

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.

answered Jun 30, 2012 at 4:34

DA.

40.8k51 gold badges162 silver badges219 bronze badges

4 Comments

Shawn31313 Over a year ago

Your not leaving the navlink to get to the submenu since the submenu is inside of the navlink.

DA. Over a year ago

@Shawn31313 look again. You are incorrect. .navlink is a sibling of .submenu--not a parent. Not sure why this got a downvote (whoever did it, please explain)

Shawn31313 Over a year ago

Mmm, I see, well your code is still not really close to what he needed. Instead of doing the hover function on .navlink all you would of had to do is do it on the li. Then find the submenu child.

DA. Over a year ago

@Shawn31313 Yep. I could have done that. In fact, if you read my answer, I say exactly that. But that wasn't the question, though. Sometimes I try to help the OP think bit. To each their own.

Collectives™ on Stack Overflow

Using JQuery to handle submenus

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related