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.

9 thoughts on “Simple drop down menu with Jquery

  • Claire

    (April 17, 2012 - 12:59 am)

    good website and happy messages. i like it. thank you master!

  • Claudeci

    (April 22, 2012 - 10:23 am)

    keep the good work by posting better posts, as you always do.

  • Cícera

    (May 8, 2012 - 10:18 pm)

    nice website you have here…thanks for sharing the information

  • Elisandra

    (May 8, 2012 - 11:44 pm)

    wow, very interesting, keep sharing these things with us, please.

  • Caterina

    (May 16, 2012 - 11:20 pm)

    it appears that you have placed a lot of effort into your article and i require more of these on the net these days. i only wanted to comment to reply wonderful work.

  • Elis

    (May 30, 2012 - 6:28 pm)

    this was a really quality post. in theory i’d like to write like this too. taking time and real effort to make a good article.http://www.divulgaemail.com

  • Etelvina

    (May 30, 2012 - 11:39 pm)

    thanks for the post..http://www.kitsucesso.com

  • Elisete

    (June 16, 2012 - 10:42 am)

    thanks for posting, please keep doing it.

  • Edinalva

    (July 9, 2012 - 9:56 am)

    this is very helpful information delivered with wit and style.

Leave a Reply

Your email address will not be published. Required fields are marked *