Make your own WordPress Drop-Down menu

To get started with this tutorial, you'll need to have a WordPress website up and running and a willingness to alter your theme files. Once that's squared away you're ready to rock!

The Standard WordPress navigation layout

Before we get into making drop downs, we need to take a look at the way WordPress layouts it’s navigation.

<ul id="nav">
	    <?php wp_list_categories('title_li=&sort_column=menu_order'); ?>
</ul>

You might also want to include a home link. You can add this manually like so:
view source
print?

<ul id="nav">
	    <li><a href="<? bloginfo('siteurl'); ?>">Home</a></li>
	    <?php wp_list_categories('title_li=&sort_column=menu_order'); ?>
</ul>

Both wp_list_pages and wp_nav_menu lay out their menus pretty much exactly the same, besides different class names, so we’ll just take a look at wp_nav_menu's printed code:

<ul class="menu">
	<li class="cat-item cat-item-6"><a href="http://localhost/wordpress/category/long-category/" title="View all posts filed under Long Category">Long Category</a>
	<ul class='children'>
		<li class="cat-item cat-item-7"><a href="http://localhost/wordpress/category/long-category/sub-long-category/" title="View all posts filed under Sub Long Category">Sub Long Category</a></li>
	</ul>
	</li>
	<li class="cat-item cat-item-1"><a href="http://localhost/wordpress/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
	<ul class='children'>
		<li class="cat-item cat-item-4"><a href="http://localhost/wordpress/category/uncategorized/subcategories/" title="View all posts filed under SubCategories">SubCategories</a></li>
	<li class="cat-item cat-item-3"><a href="http://localhost/wordpress/category/uncategorized/subcategorized/" title="View all posts filed under Subcategorized">Subcategorized</a></li>
	</ul>
	</li>
</ul>

As you can see, WordPress neatly (well neat besides all the classes) layouts out the menu in a nice semantic list, with the children of the navigation nested inside of it’s parent li. This allows us to use both CSS and/or jQuery to make our drop downs work!

Styling the Navigation

Now, let’s styling the navigator. We want our list items aligned horizontally, and of course centered in the middle of the page.

	ul.menu { list-style: none outside none; padding: 0; margin: 0 10px; float: left; font-size: 13px;}
	ul.menu li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; }
	ul.menu li a { padding: 9px 5px; color: rgb(255, 255, 255); display: block; text-decoration: none; float: left;  display: block;}
	ul.menu li:hover { background: #A6CB1B; }
	.current-cat { background: #8BBF47; }
	ul.menu li span { width: 11px; height: 10px; float: left; background: url('images/narga-sprites.png') -561px -78px no-repeat; margin: 11px 0 0 0;}
	ul.menu li ul.children {z-index:99; list-style: none outside none; position: absolute; left: 0; top: 31px; background: none repeat scroll 0% 0% rgb(51, 51, 51); margin: 0; padding: 0; display: none; float: left; width: 170px;  border-bottom: 1px solid #F8C92D;}
	ul.menu li ul.children li { margin: 0; padding: 0; clear: both; width: 170px; border-top: 1px solid #F8C92D;}
	html ul.menu li ul.children li a { float: left; width: 145px; background: url('images/narga-sprites.png') -578px -162px no-repeat #A6CB1B; padding-left: 20px; }
	html ul.menu li ul.children li a:hover { background: url('images/narga-sprites.png') -578px -162px no-repeat #7BAF36; }

jQuery Animation the Navigation

There’s also an easy way to make WordPress menus with jQuery drop downs. jQuery allows you to get a bit more fancy, by adding speeds and fades to the animation. It’s also useful if you’re still stuck supporting IE6.
There’s a tiny piece of jQuery required to show/hide the drop down menu’s. From an accessibility point of view, you can link the top-level navigation item so that if JS is disabled, the user will still be able to get around your site. Here’s the script.

jQuery(document).ready(function() {
//Dropdown Menu
	if(!jQuery.browser.msie){// IE  - 2nd level Fix
		jQuery("ul.topnav&quot.css({opacity:"0.95"});
	}
	jQuery(".topnav > li > ul&quot.css({display: "none"}); // Opera Fix
	jQuery("ul.children&quot.parent().append("<span></span>" //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
	jQuery("ul.menu li a&quot.hover(function() { //When trigger is clicked...
		//Following events are applied to the subnav itself (moving subnav up and down)
		jQuery(this).parent().find("ul.children&quot.slideDown('fast').show(400); //Drop down the subnav on hover
		jQuery(this).parent().hover(function() {
		}, function(){
			jQuery(this).parent().find("ul.children&quot.slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});
		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			jQuery(this).addClass("subhover" //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			jQuery(this).removeClass("subhover" //On hover out, remove class "subhover"
	});

})

WordPress Drop-Down menu with CSS and jQuery (View in Action)

Finally!! A Drop Down WordPress Navigation Menu using CSS and jQuery!

That's basically it, the example is about as stripped down as I could make it. Hopefully you'll have fun bending the code to your next project. Feel free to post comments if you have any questions about the tutorial. Happy coding!

1. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

Sexy Drop Down Menu w/jQuery & CSS

2. CSS-Tricks Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still drop down menu has all the functionality typically needed.

Simple jQuery Dropdowns

3. The Fanciest Dropdown Menu

Brian Cray teaches you how to create this stunning website drop down navigation menu. The drop down menu uses HTML, CSS and Javascript. You can also include the hoverIntent JQuery plugin for extra juicy effects.

The Fanciest Dropdown Menu

4. A Different Top Navigation Menu

They will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

A Different Top Navigation Menu

5. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications

jdMenu Hierarchical Menu Plugin

6. Professional dropdown #2

This menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers. This is a little long-winded but necessary as IE5.5 and IE6 do not understand the child selector.

Professional dropdown #2

7. Designing the Digg Header

The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It’s fluid width, but it doesn’t shrink too far or grow too big.

Designing the Digg Header

8. Create Vimeo-like top navigation

What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.

Create Vimeo-like top navigation

9. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

Cut & Paste jQuery Mega Menu

10. Animated Drop Down Menu with jQuery

Drop down menus are a really convent way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

Animated Drop Down Menu with jQuery

11. mcDropdown jQuery Plugin

To overcome this obstacle, we spent a lot of time developing code that would automatically split long lists into multiple columns and then position itself so that it always fits within the viewport. The overall effect is somewhat similar to the Microsoft® Windows® "Start > All Programs" menu. However, the algorithm we use should keep the menus laid out in a more compact layout—which we believe offers quicker selection of the menu items. The screenshot below shows what the menu looks like when used with a very large menu.

mcDropdown jQuery Plugin

12. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

The entire menu sits within a fixed-size area, and when a node is selected, by default a "Back" link appears below the menu to allow navigation to previous (parent) menus, or set options to show breadcrumb links above the menu options to both deliver feedback and allow quick access to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

jQuery Menu - Dropdown, iPod Drilldown, and Flyout styles

13. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

Drop down menu with nested submenus

14. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top-level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI. The menu also manages to sneak in a little CSS3, making use of the "border-radius" property to give each link within the sub ULs rounded edges when the mouse hovers over them..

jQuery Drop Line Tabs

15. jQuery Drop Down Boxes

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

jQuery Drop Down Boxes

16 . Reinventing a Drop Down with CSS and jQuery

For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).

Reinventing a Drop Down with CSS and jQuery

17. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

Sliding Menu Tutorial

18. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that has AccordionPane web controls.

Outlook Navigation Bar using the ListView and Accordion Controls

19. Perfect signin dropdown box likes Twitter with jQuery

This tutorial will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tool tips. Enjoy it!

Perfect signin dropdown box likes Twitter with jQuery

20. jQuery UI Potato Menu Plugin

jQuery UI Potato Menu

21. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

Superfish - jQuery menu plugin

22. Dynamic Drive - Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead.

Smooth Navigation Menu

23. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully interactive file tree with as little as one line of JavaScript code.

jQuery File Tree

24. Make a Mega Drop-Down Menu with jQuery

Make a Mega Drop-Down Menu with jQuery

25. jQuery.mb.Menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right-click) in an intuitive way!
You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

jQuery.mb.Menu