Tutorial : How to create a fancy drop-down menu the easy way

I’ve seen it many times on other blogs and always asked myself : how did they do it ? After a bit of digging and researching I found out it wasn’t that hard after all. If you’d like to have a fancy drop-down menu on your blog, and at the same unclutter your navigation menu then this tutorial is meant for you.

The advantages of using such a menu

• It makes your design look more appealing.
• Re-arranging pages is a great way to unclutter your navigational menu
• Improved page visibility.
• Cross-browser compatibility, get rid of all those IE and older browser bugs.
• Auto highlights the page you’re currently viewing, no extra coding work needed.

First off, you’ll need to get the right plug-in to make this work, you can download it from here : Download plugin.

Steps to follow :

1) Unpack, upload and activate it.

2) Go into Presentation - Theme Editor and locate on the right site your Header file ( that’s where usually the nav menu is, if it’s somewhere else you’ll just have to locate it ).

3) Next, you’ll want to copy this code in your Header file, replacing the old nav menu code <?php echo wp_jquery_dropdownmenu(1, "Home",1, 0); ?>

4) Click on update file, wait a bit and check the front-page for any visible modifications.

The customization & explanations :

The plug-in comes by default with a style.css file which can be later on edited to make it fit your design. The code might look a bit tricky at first but it’s not, trust me.

The first value( in my case, 1) - is used to position the Home link

0 - does not put a link to you blog into the dropdown menu.
1 - Puts a link to your blog on the left hand side of the dropdown menu.
2 - Puts a link to your blog in the right hand side of the navigation menu.

The second value(in my case, Home) - defines the title for the link to your blog

If you would like a link to you blog to appear in your drop-down menu, this represents the title of that link.

The third value( in my case, 1) - manages the way your pages are arranged

0 - pages will by sorted by their ID
1 - pages will be arranged accorded to their menu order. The menu order can be set in the pages section of your wordpress blog.

The fourth value(in my case, 0) - check to see if the parent pages are clickable or not.

Fourth value (0 in the above example):
0 - if you would prefer the ‘parent’ of a dropdownmenu to be unavailable for clicking.
1 - if you would prefer the ‘parent’ of a dropdownmenu to be clickable.