I am looking for a ‘mega menu’ style vertical menu.
It can make use of Jquery if needed because I already have other scripts using the Jquery library so it would already be downloaded and ready.
I am looking to have a DIV box with rounded corners smoothly slide out from the hovered menu item and take it’s place in the middle of the screen as shown in the mockup image. The div should be fixed in that location for each menu item unless the user has already scrolled further down on the screen and the top of the new menu would not be visible, in which case the top of the menu should be at the top of the browser window.
The div should use some sort of Jquery animation to where it slides out of the hovered menu item in the left bar (Quad Speed Skates for example). It needs to look cool and fun. It should be very smooth and fade in with a customizable fade time that I can change.
It should have a customizable time to stay open after the user has moved their mouse off of the pop out menu on another part of the page but has not selected a different menu yet. It should smoothly slide back in to the left bar where it came from when either the timer runs out or if the user clicks on any other part of the page.
This needs to be minimal coding, preferably not using <table>’s. This site has very good SEO rankings and I don’t want to hurt that. This needs to be good clean code that is very SEO friendly.
The images that are in the hidden divs for the menu should not load until after the rest of the initially visible page have loaded so it does not slow down the page loading. It might be a good idea to use the Jquery HoverIntent plugin to predict where the user will go next.
Here is the visual mockup:
http://www.lowpriceskates.com/misc/lps_menu_mockup.jpg
Here is the website:
http://www.lowpriceskates.com
Please let me know if you have any questions and make sure you understand fully before bidding.
Thank you!!
