homepage Welcome to WebmasterWorld Guest from 54.161.214.221
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery Vertical nav question
geoffb




msg:4395530
 12:36 pm on Dec 8, 2011 (gmt 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

 

rocknbil




msg:4395637
 5:21 pm on Dec 8, 2011 (gmt 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.

daveVk




msg:4395833
 2:35 am on Dec 9, 2011 (gmt 0)

a few bits of Javascript will set their display to block

or maybe

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

will suffice ?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved