I need to create a vertical menu like so:
- Item 1
- Item 1.1
- Item 1.2
- Item 2
- Item 3
- Item 4
I need the sub-menu to expand/collapse below it’s parent item on hover. I need it to have a page indicator or the ability to use the active state so the menu displays the page you’re currently on. Also, this is going to be customized several times throughout a site, so I need to keep the titles/links in the html only.
I haven’t been able to find or create a solution that fits all of these requirements. I have been researching for a few days and keep coming up empty handed. Any advice and/or solutions would be greatly appreciated!
May be a simple sliding jQuery menu would help you here.
Here is an example fiddle.
Let me know if it helps you or not.
Edit
Well for this active-state issue I had to play a little more with the code and finally I got it as you wanted it to be (i guess so)…
Here is the NEW FIDDLE.
Also here now I am using
class selectorsthat makes the code much smaller and easy to read… 🙂Cheers..
Update:
May be this is what you want: http://jsfiddle.net/Zx2EU/3/