And here is the recipe:
- Create a Place Holder Div for the navigation menu. Now add some divs(Menu Items) to this container.
- This div will work as container for the Main Menu and Submenu under it.
- Now Add a paragraph and a UL – LI structure under each of Menu Item Div created in last step.
- We can add some a-tags in LIs to work as a link.
- I have added some simple css style to get it noticeable. You can apply yours to make it handsome.
Thats all to do with HTML.
<!--(Step-1) This is the first Div:"menu-bar", we are using
as a Place Holder for the Navigation Menu -->
Ok so now we just have to add some jQuery that will Do some animation for our menu. We are using all around 3(of these 5) very simple methods of jQuery:
- .mouseenter() : It triggered when you mouse enters an element bound with this method.
- .mouseleave() : It triggered when you mouse enters an element bound with this method.
- .slideup(‘slow/fast/time in ms’) : It hides an element with a effect of sliding it up.
- .slidedown(‘slow/fast/time in ms’) : It shows an element with a effect of sliding it down.
- .slideToggle(‘slow/fast/time in ms’) : It will toggle/change the state in between up/down.
we have to set just two things,
- Whenever someone hover the menu show the the submenu that is combination of .mouseenter() + .slidedown()
- And when it hover-out hide submenu that is combination of .mouseleave() + .slideup()
Oh forget to write,we are binding these jQuery methods on html elements on DOM ready(No wonder you know jQuery Ready event). Here is the jQuery code looks like :