Step 4 – Animating the Drop Down Menus using JQuery
Following on from styling out drop down menus in Step 3, the first thing we need to do is hide the child menus. We had set them to always display so that it was possible to check the styles had been applied correctly. However, by default it makes more sense to hide these drop down menus so that we can make use of JQuery to display the menus when the user hovers over a parent menu item.
Therefore, modify the .navigationBar_sub ul style as shown here:
Set the display property to ‘none’ to hide the element
Now all that is left to do is add the JQuery script to fade in and out the drop down menus when the users hovers over the corresponding parent menu item.
Add a script reference to pull in the JQuery library from Google API into the <head> of your page. Alterantively you can download the library locally and reference it but for simplicity I’ll use the Google API.
JQuery library reference
Finally, after the <html> section, add a <script> section to contain the following JQuery code:
JQuery Script for fade in/out animation
All we are saying here is that if the users hovers the mouse over a Div associated to class nav_main_item, look for the first <ul> tag within that Div and fade in and out its contents. The stop function just ensures that all previous animations are cancelled reducing any flicker.
And that’s it, the final menu is complete.
Like I mentioned at the start of this blog, If you want me to send you the source for this menu then you can contact me using the form on the ‘About’ section of my blog. I should be able to respond quickly.