Simple drop down menu with Jquery

This post is a forward step of my earlier post (can be found here) where we used purely HTML and CSS. In this post we will look into a similar multi-level drop down menu with very little Jquery.

We start with our code…

Startup file inclusion

From above,

  • ‘style.css’ is for our styling purpose
  • jquery min version file downloaded from http://code.jquery.com/
  • ‘func.js’ is the file containing function that we need for our drop down menu

HTML code

Next, the menu item. We are placing the menu items in Home- does not contain a sub-menu, Services- has Service 1, 2 & 3 as the second level, About- links to Management, Team & Jobs and finally, Team- contains Design, Operations & Development. Hope now the whole menu is in your eyes for which the HTML code is

Our HTML code is over now and if you notice there are ‘showSub’ & ‘hideSub’ functions with a parameter that are called on mouse out and mouse over events. These are the functions that will help us to show or hide our sub-level menus. We will talk about that later.

The CSS
The next job we need to do is the CSS styling. We are using CSS for little bit of styling and a small amount of positioning those div we have put.

Now, on to our func.js which contains our Jquery function.

JQuery Part

The ‘showSub’ and the ‘hideSub’ functions are placed in func.js file that we attached at the very beginning.

  • ‘showSub()’ function gets the current mouse hovered div id i.e. tier1 or tier2 or tier3 and the sub-menu (inner div), the child div is shown of that particular div id.
  • ‘hideSub()’ function gets same id from the div and hide them by $(object).children().hide()

That’s done. If you check in Firefox or any other decent browser this will work smoothly, but did you check in Microsoft IE? It won’t do as we expected; for that we need to add one last slice of code i.e. the Document Type definition (DTD),

Its all over and works smoothly now in all the browser. šŸ™‚

This is tested and works in:firefox 4+microsoft IE 8

<<Click for demo>> | <<Click for source files>>

Thanks for reading this post and as usual, Iā€™m open to suggestion and critics (positive of course).
Do comment on!

Share

Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.