Welcome to WebmasterWorld Guest from 54.163.68.15

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
geoffb
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

<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)

WebmasterWorld Senior Member 5+ Year Member



a few bits of Javascript will set their display to block

or maybe

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

will suffice ?