Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

jQuery Vertical nav question



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

5+ Year Member

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


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

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

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

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

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)

WebmasterWorld Senior Member 10+ Year Member

a few bits of Javascript will set their display to block

or maybe

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

will suffice ?

Featured Threads

Hot Threads This Week

Hot Threads This Month