I’m using jQuery for the 1st time and trying to recreate the effect which is used on the menu on the following site: www.graphicadesign.com
I have managed to get the basics working and have uploaded to a temp address which is here - at the moment i am just trying to get it working for the ‘company’ menu.
With this being my 1st attempt with jQuery i’ve already run into a number of issues which i’m not sure how to go about solving!
currently, in my version, hovering over the sub menu items does not keep the sub menu ‘rolled out’ only hovering over the main ‘company’ link does so? how would i make it so that the additional links of the sub menu also keep the rolled out state active?
when the sub menu is in the rolled out state and a user rolls off the ‘company’ link and then rolls back onto it the 2nd rollover is stored up until the sub menu rolls back in and then it executes the roll out function again? What i want to achieve is that when a user rolls off and back onto the links whilst they are in a rolled out state it just keeps them rolled out as opposed to looping the cycle again.
Can anyone offer me some advice as to how i should be approaching the above issues?
At the moment this is what i have as my code:
and the HTML
<body> <div id="PageHolder" class="container_12 "> <div id="MainNav" class="grid_9"> <a href="" id="Home">home</a> <a href="" id="Company">company</a> <a href="" id="Services">services</a> <a href="" id="Portfolio">portfolio</a> <a href="" id="Contact">contact</a> </div> <div id="SubNavCompany"> <a href="" id="About">about us</a> <a href="" id="Location">location</a> <a href="" id="CaseStudies">case studies</a> </div> </div> </body>