Making dynamic dropdowns in WordPress

Note: This article has been marked for a quality review and will soon be updated.

The latest craze which is sweeping across WordPress theme development is that of adding drop-down menus to menu items to display sub-pages. Now while this is all very simple if we take a couple of unordered-lists and stick them in the header, making this process dynamic is a little more complex. For this we are going to use jQuery and WordPress’s parent and child allocation feature within pages (don’t worry, that’s just a fancy way of saying it ;)).

So to begin with we are going to need to set up our pages. To do this, head over into the page admin section of your site, and create a page that you would like to have sub-pages of. So for instance I created a page called “About”. Then repeat this process and create another page that you want to be in the drop-down under your main page. But before you hit “Publish”, you will need to head down to “Attributes”, just below the “Publish” button. Under parent, select the main page that you just created from the drop-down box, and then hit “Publish”. You can do this as many times as you like, but when you are happy with your structure, head over to you blog’s home-page and have a look at the menu.

Now as I have already styled my menu items with some basic CSS, it looks very odd indeed. Yours should look similar, but depending on your CSS, looks will differ. Anyhow, let’s think about how we are going to get around this issue of aesthetic dismay! We need to apply the same sort of menu styling to our sub menus, but to avoid odd issues later on we could do with having a class applied to our sub-menu (you could do it with pure CSS, but this way makes it look cleaner). And for that we are going to use some nifty JavaScript. So copy and paste the code below the code that creates your menu.

$("li.page_item ul").addClass("sub-menu"); 
$(".sub-menu").parent().addClass("parent");                

So now we have a class of “sub-menu” applied to all the sub-menus that are present on our page and we are free to manipulate them how we like. Now bear in mind that we could use a selector that just got all unordered lists within unordered lists to access our sub-menus, but this way is far cleaner in my opinion. And now that we have this class applied we are free to manipulate the look and fee of the sub-menus. For this we will use some simple CSS, now some of this CSS will be style-specific, but bear in mind that things like the position property are core to this effect working.

.sub-menu {
	display:none;
	left:0;
	position:absolute;
	top:26px;
}
	
.parent {
	position:relative;
}

.sub-menu li {
	float:none !important;
	margin:5px 0 0 !important;
	opacity:0.8;
	width:140px;
}

Now you should have an invisible sub-menu that is set to appear below the parent item. Notice that I lowered the opacity so that we get a nice overlaying effect.

Next we will use a JavaScript plug-in to determine when the user hovers over our menu item. The reason we are using a plug-in is because it really simplifies the code and makes it more efficient, trust me I tried to do it without the plug-in, and it isn’t as simple as you may think! The plugin we will be using is HoverIntent – which is a handy little thing based upon jQuery’s hover() event. So go ahead and stick that script into your header and then go below the menu items to add some more JavaScript.

$(function(){

    	var config = {    
         	sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
         	interval: 100,  // number = milliseconds for onMouseOver polling interval    
         	over: doOpen,   // function = onMouseOver callback (REQUIRED)    
         	timeout: 200,   // number = milliseconds delay before onMouseOut    
         	out: doClose    // function = onMouseOut callback (REQUIRED)    
    	};
    
    	function doOpen() {
        	$(this).addClass("hover");
        	$('ul:first',this).fadeIn();
    	}
 
    	function doClose() {
       		$(this).removeClass("hover");
       		$('ul:first',this).fadeOut();
    	}

    	$("ul#nav li").hoverIntent(config);
    
});

Lastly let’s attend to that class we added there with some nifty CSS which will ensure that the drop-down will always be on-top, unless you use something like a light-box plug-in later on.

.hover {
	z-index:9999;
}

And that should just about do it! After implementing that code and applying your own styling you should have a menu that looks something like the one below.