javascript - Creating a simple submenu drop down using jQuery - Stack Overflow

admin管理员组

文章数量:1391987

Here's an example of what I'm aiming for:

---

I don't like I have to decorate a li element with a class in order to correctly fire the event. What happens if I have more than one nested category drop down? Things get messy quick!

I also can't seem to be able to select an option without it closing as soon as I leave the event capture area.

Any suggestions on how to build a well crafted, drop down navigation menu?

Here's an example of what I'm aiming for:

---

I don't like I have to decorate a li element with a class in order to correctly fire the event. What happens if I have more than one nested category drop down? Things get messy quick!

I also can't seem to be able to select an option without it closing as soon as I leave the event capture area.

Any suggestions on how to build a well crafted, drop down navigation menu?

• javascript
• jquery
• html
• navigation

Share Improve this question Follow edited Jul 26, 2012 at 13:28 Undefined 11.4k55 gold badges3939 silver badges6262 bronze badges asked Jul 26, 2012 at 13:19 Only Bolivian HereOnly Bolivian Here 36.8k6565 gold badges167167 silver badges257257 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You don't really need any classes with some clever usage of the selectors :P

I set up a fiddle with an example, here's the code:

HTML:

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li>
            <a href="#">OFFERS</a>
            <ul>
                <li>
                    <a href="#">NEW</a>
                    <ul>
                        <li>YAY!</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">SETTINGS</a></li>
        <li><a href="#">TV's</a></li>
        <li><a href="#">COMPUTERS</a></li>
        <li><a href="#">RICE</a></li>
    </ul>
</nav>​

As you see, not a single class/id was needed :P The element "OFFERS" is the only one with a drop-down menu, and inside that menu, the element "NEW" has another one.

CSS:

li > ul { display: none; }
li li { margin-left: 10px; }

The first style is the important one. At first, we want our submenus to be hidden. The other style is just for the sake of clarity.

jQuery:

$("nav ul li").hover(function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).show();
    }
}, function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).hide();
    }
});​

Yup, as simple as that :) When we hover a menu element, we check if it has any ul direct children, if it does, we show them. When we leave the menu element, we check again if it has any ul direct children, and if it does, we hide them.

Of course, you'll need to style this up, and make sure your clear any float inside any li.

You would need to use classes to properly control the flow. Especially on your outer container.

For example in my menus i have a ul containing all the menu and each menu item is an li. Inside the li is the first level title, along with another ul containing the submenu.

<ul class="menu">
    <li>
        Item 1
        <ul><!--Further items--></ul>
    </li>
    <li>
        Item 2
        <ul><!--Further items--></ul>
    </li>
</ul>

You can then control this using child selectors. Although it is sometimes easier to simply use a class.

$(".menu > li") //First level items
$(".menu > li > ul") //Submenus

Say you wanted to make the menu slide down when you clicked on one of the first level items:

$(".menu > li").click(function() {
    $this = $(this); //Caching. Not really needed for this example. But anyway :)
    $this.children("ul").slideToggle("fast");
});

$(document).ready( function(){ 
   $("ul.MenuNavi li").mouseover(function(){ 
     $(this).children('ul').slideDown('3000'); 
   }); 
   $("ul.MenuNavi li").mouseleave(function(){                    
     $(this).children('ul').stop(true).slideUp('3000'); 
   }); 
});

本文标签： javascriptCreating a simple submenu drop down using jQueryStack Overflow