CODEWITHSUNDEEP
jqueryhtml
Oliver 'Oli' Jensen
Oliver 'Oli' Jensen

Reputation: 2651

toggle menu - sub menu on click - jQuery / HTML

I have this menu: 

      <div id="menu">
            <div class="header">Menu Header</div>
            <ul>
                <li>asdfsadfdsaf</li>
                <li>sadfsadf</li>
                <li>asdfasdf</li>
                <li>asdfsadf</li>
                <li>asdfsadf</li>
            </ul> 
         </div>

How can I do, so whenever I click on one of the links inside each LI, a new sub-menu will toggle in "under" the clicked one?

Upvotes: 0

Views: 1915

Answers (2)

Alexey
Alexey

Reputation: 642

First, you need different markup:

<div id="menu">
    <div class="header">Menu Header</div>
    <ul>
        <li>
            <span>Menu item</span>
            <ul>
                <li>Submenu item</li>
                <li>Submenu item</li>
                <li>Submenu item</li>
            </ul>
        </li>
        <li>
            <span>Menu item</span>
            <ul>
                <li>Submenu item</li>
                <li>Submenu item</li>
                <li>Submenu item</li>
            </ul>
        </li>
        ...
    </ul> 
</div>

And simply apply the css and js to the submenu, just like u did with the mainmenu

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Here is a simple menu pattern to follow:

http://jsfiddle.net/Diodeus/jejNy/

Upvotes: 1

Related Questions