Welcome to WebmasterWorld Guest from 54.147.134.218

Forum Moderators: open

Message Too Old, No Replies

jQuery Vertical nav question

     
12:36 pm on Dec 8, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 20, 2008
posts: 133
votes: 0


Hi all,

Is it possible to create a vertical menu with 4 top level links, and 2 submenu's under each, when page is loaded all the sub menu's are closed, then on hover over any of the top level links the sub menu under slides open, but (and this is where I am stuck) I also need the top level menu's to be clickable and take the user to that page...rather than just a handle for an animation be it a click or mouseover ect.

Many thanks
geoffb
5:21 pm on Dec 8, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Anything is possible. :-) Structure these as a series of nested UL's

<ul>
<li>Top menu 1
<ul>
<li>Sub menu 1.1</li>
<li>Sub menu 1.2</li>
<li>Sub menu 1.3</li>
</ul></li>
<li>Top menu 2</li>
<li>Top menu 3
<ul>
<li>Sub menu 3.1</li>
<li>Sub menu 3.2</li>
<li>Sub menu 3.3</li>
</ul></li>
</ul>


This will do most of the "heavy lifting" for you, positioning the nested ul's in the right places. You'd set them as hidden initially,

#nav ul li ul { display:none; }

Then on hover of the anchors (note I've left out the anchors for simplicity, you'll have to add them) a few bits of Javascript will set their display to block.

Let's see what (minified) code you've started with.
2:35 am on Dec 9, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


a few bits of Javascript will set their display to block

or maybe

#nav ul li:hover ul { display:block; }

will suffice ?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members