CODEWITHSUNDEEP
jqueryhtmlmenusubmenu
EtherealNP
EtherealNP

Reputation: 109

jQuery toggle dropdown menu

Im making some dropdown menu with jQuery effect, now im need litle help for creating one more submenu (in dropdownmenu).

HTML:

<ul id="nav">
    <li><a href="#">Homepage</a>
        <ul>
            <li><a href="#">Sumbenu</a></li> // i want to add one more submenu, in this submenu
            <li><a href="#">Submenu</a></li>
            <li><a href="#">submenu</a></li>
            <li><a href="#">submenu</a></li>
        </ul>
    </ul>

jQuery

$(document).ready(function(){
    $('li').hover(function(){
        $(this).find('ul>li').stop().slideToggle(400);
    });
});

Upvotes: 1

Views: 26362

Answers (1)

Mooseman
Mooseman

Reputation: 18891

An extremely simple example:

Demo: http://jsfiddle.net/tjf22z6p/

HTML:

<ul id="nav">
    <li><a href="#">Homepage</a>
        <ul>
            <li><a href="#">Submenu</a>
                <ul>
                    <li><a href="#">Sub-Submenu</a></li>
                    <li><a href="#">Sub-Submenu</a></li>
                    <li><a href="#">Sub-Submenu</a></li>
                </ul>
            </li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">submenu</a>
                <ul>
                    <li><a href="#">Sub-Submenu</a></li>
                    <li><a href="#">Sub-Submenu</a></li>
                    <li><a href="#">Sub-Submenu</a></li>
                </ul>
            </li>
            <li><a href="#">submenu</a></li>
        </ul>
    </li>
</ul>

CSS:

ul{
    width: 100px;
    position: absolute;
    left: 100px;
    top: 0;
}
#nav{
    left: 0;
}
li ul{
    display: none;
}

jQuery:

$('li').hover(function(){
    $(this).children('ul').stop().slideToggle(400);
});

Upvotes: 8

Related Questions