Reputation: 530
I've done quite a bit of searching, but haven't been able to find exactly what I'm looking for. I'm trying to achieve an effect to where when the Parent menu item is clicked, a div containing a submenu with links relative to that parent item is dropped down and displayed. I've created an example here to give an idea:
http://jsfiddle.net/itsbc/WeL6j/1/
However, I don't want the grey div - #9e9e9e '#div' - to be covered. I understand the reason for this is because I've set the content position to fixed, however if I take off the position attribute, the submenus show up below their respective parent; opposed to being positioned all the way to the left.
Thanks in advance for any help, Bc.
Upvotes: 0
Views: 1676
Reputation: 660
Is http://jsfiddle.net/WeL6j/7/ what you wanted to do? If so, I think it is easiest to place the hidden divs below the nav bar, where they should be displayed. Then just hide/display as neccessary
Upvotes: 1
Reputation: 1800
Seems like you're looking for a a functionality similar to jQuery tabs. Check collapsible option: http://jqueryui.com/demos/tabs/#collapsible
You'll have to extend it a bit so that content slides down instead of showing up: example:
Upvotes: 2
Reputation: 530
You may want to try toggle, a jQuery method: http://api.jquery.com/toggle/
Upvotes: 2