This should be an easy project for a jQuery expert. I have a hybrid “mega” main navigation menu that needs to be completed. I started it, but I’m not familiar enough with jQuery and CSS to get it working properly. I say it is a hybrid because mega menus typically drop down from the main nav button. However, this one has a typical drop down on the SERVICES button, then when you mouse over one of the sub-menus (MRI, CT Scan, Ultrasound), a “mega” navigation panel opens up. The following is the structure of this navigation menu;
SERVICES (main-nav button)
– MRI (sub-nav button)
—- PROCEDURE #1 (panel #1)
—- PROCEDURE #2 (panel #1)
—- PROCEDURE #3 (panel #1)
—- PROCEDURE #4 (panel #1)
– CT SCAN (sub-nav button)
—- PROCEDURE #1 (panel #2)
—- PROCEDURE #2 (panel #2)
—- PROCEDURE #3 (panel #2)
—- PROCEDURE #4 (panel #2)
– ULTRASOUND (sub-nav button)
—- PROCEDURE #1 (panel #3)
—- PROCEDURE #2 (panel #3)
—- PROCEDURE #3 (panel #3)
—- PROCEDURE #4 (panel #3)
TECHNOLOGY (main-nav button)
INFORMATION (main-nav button)
ABOUT US (main-nav button)
FAQs (main-nav button)
!!! PLEASE NOTE: Only the SERVICES menu has this drop-down/mega menu. None of the other main navigation buttons will drop down. !!!
I have an html file with my CSS and Javascript to work from if you want. This is an existing website, so I will need to take you code and integrate it into the website — that’s why I think you’re better off if you use my “framework” during testing.
Please make sure these features are working properly;
1) When a mega panel is open, the main nav button and the sub nav button retain the “mouseover” effect. This means SERVICES is the #B25F2B font color. The sub nav button background should be #DCAB8D, along with the “arrow_on.gif”
2) The sub-nav buttons right border should be removed when the panel is open, so the backgrounds do not have a divider.
3) If you mouse off main nav, sub-nav or the panel, the whole nav structure will close.
4) Grow and shrink the “panel” height to fit the contents. The panel links are going to be generated dynamically from a database, so the panels must be able to shrink and grow in height when the page is rendered.
6) If you mouse off a panel onto a sub-nav button, the panel should close, but the sub-nav drop down should stay open. Then if you mouse off the sub-nave drop down onto the main nav SERVICES button, then the drop down should stay open.
You must use jQuery for Javascript! If a jQuery plug-in exists that solves this problem, you are welcome to use it.
See attached zip file for the source code and images required. The project needs to be completed within the next 24 hours.
Thank you in advance.