Help with creating an onclick slidedown menu

JavaScript
1

Hi

I would like to create a slidedown menu similar to the one that can be seen here…

http://www.tricksterteatro.ch/index.asp?pagina=1385

The main points are:

• submenu slides down when main nav item is clicked, not on hover

• submenu stays open until another top level menu item is clicked, which makes the first submenu slide closed and the new submenu slide open

• active items in top level menu and submenu are highlighted.

• when a page linked to from a submenu loads, it’s submenu is visible.

I’m afraid when it comes to JS/jQuery, while I’m usually capable of modifying existing plugins to fit my needs like superfish etc, I’m not able to roll my own yet.

Unfortunately I can’t seem to find an existing plugin that basically does what I want on this occasion…

Can anyone help me with this please?

thanks!

My HTML looks like this

<div id=“nav”>
<ul>
<li><a href=““>Topnav1</a>
<ul>
<li><a href=””>Submenu1</a></li>
<li><a href=““>Submenu2</a></li>
<li><a href=””>Submenu3</a></li>
</ul>
</li>
<li><a href=““>Topnav2</a>
<ul>
<li><a href=””>Submenu4</a></li>
<li><a href=““>Submenu5</a></li>
<li><a href=””>Submenu6</a></li>
</ul>
</li>
</ul>
</div>

2

Can no one offer any help with this one?

If anyone knows a plug-in that would be a good starting point for what I need that would be useful - I have looked but no luck. Spoilt for choice on hover plug ins but none seem to do onclick.

If not, then I guess I’ll try building what I need from scratch. I’m currently on chapter 3 of Sitepoint’s jQuery: Novice to Ninja…Menu’s are chapter 5. Bring it on.

3

Visit jquery.com and download the files, also visit the tutorials page (link) where they have a number of ideas and scripts to use.

4

This might be what your after on this page :slight_smile:

Other effects can be found here :cool:

5

Hi spence_noodle

thank you for taking the time to give me some pointers - there’s definitely some useful stuff there.

I have skipped to the menus chapter of the jQuery - Novice to Ninja book and I am making some progress, but still quite a way to go.

I have worked out how to make my menus slide down and also how to make a menu load in it’s open state when it is active (but haven’t got those two things working together yet!) also haven’t managed to get a menu to close when another one opens yet either. Will keep trying and post my progress here in the next couple of days - have to work on something else right now…

thanks again.