toggle menu - sub menu on click - jQuery / HTML

Question

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?

Have you looked at the jquery click event handler? One of the easiest ways would be to have attach a click event listener to each of the li's and have it show or hide another set of ul/li elements that are contained in the current one. This requries a bit of css work as well. What have you tried? — scrappedcola
– scrappedcola, Commented Sep 8, 2011 at 21:00

Diodeus - James MacFarlane · Accepted Answer · 2011-09-08 21:00:47Z

1

Here is a simple menu pattern to follow:

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

answered Sep 8, 2011 at 21:00

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

1 Comment

Marco Johannesen Over a year ago

He wrote "click", so you could just replace mouseenter with a click :D

Alexey · Accepted Answer · 2011-09-08 21:04:33Z

0

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

answered Sep 8, 2011 at 21:04

Alexey

6421 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

toggle menu - sub menu on click - jQuery / HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related