jQuery: add a collapsible menu to WordPress

While trying to optimize at its best this website, I noticed that my top menu was actually broken when viewed on iPad. So I asked my smart father: "Do you like horizontal or vertical menus?". And he said: "Vertical. More practical". So I decided to turn my top horizontal menu into a vertical one. The problem was that I couldn't use too much vertical space. That's why I've created a collapsible jQuery menu for WordPress.

The first thing you have to do is to modify your header.php file with a new structure:

<div id="secondary-navigation">
	<h4>Categories <span>+</span></h4>
	<?php
		wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => false, 'menu_class' => 'secondary-menu') ); 
	?>
</div>

The heading will be used as a trigger to open and close the menu. Then we need some basic CSS styles:

#secondary-navigation {
	height: 3em;
	margin: 0 0 0 1em;
	float: left;
	width: 12em;
	position: relative;
}

#secondary-navigation h4 {
	padding-top: 0.7em;
	text-align: center;
	font: 1.2em Arial, sans-serif;
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
}

#secondary-navigation h4 span {
	background: url(images/category-menu.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px 1px #000;
	color: #444;
	margin-left: 1em;
}

#secondary-navigation ul.secondary-menu {
	width: 100%;
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	top: 3em;
	left: 0;
	background: #000;
	z-index: 1000;
	
}

#secondary-navigation ul.secondary-menu > li {
	display: block;
	margin-bottom: 0.4em;
	position: relative;
}

#secondary-navigation ul.secondary-menu > li > a {
	border: none;
	padding: 0.4em 0.5em;
	text-transform: uppercase;
	display: block;
	color: #fff;
}

#secondary-navigation ul.secondary-menu > li > a:hover,
#secondary-navigation ul.secondary-menu > li.current-menu-item > a {
	background: #333;
	color: #fff;
}

#secondary-navigation ul.secondary-menu > li ul {
	width: 12em;
	background: #333;
	position: absolute;
	left: 0;
	display: none;
	margin: 0;
	padding: 0;
	z-index: 1000;
}

#secondary-navigation ul.secondary-menu > li ul li {
	margin-bottom: 5px;
	display: block;
	padding: 0.4em 0 0 0;
}

#secondary-navigation ul.secondary-menu > li ul li a {
	display: block;
	padding: 0.3em;
	color: #fff;
	font-variant: small-caps;
	border: none;
}

#secondary-navigation ul.secondary-menu > li ul li a:hover {
	background: #000;
	border: none;
}

#secondary-navigation ul.secondary-menu > li:hover ul {
	left: 12em;
}

Now the menu is absolutely positioned just under the header area and is hidden from view. With jQuery, we need to add an action to the menu heading:

(function($) {

	$(function() {
	
	
		var header = $('h4', '#secondary-navigation');
    	var span = $('span', header);
    	var plus = '+';
    	var minus = '-';
    	
    	header.click(function() {
    	
    		if($(this).next().is(':hidden')) {
    		
    			$(this).next().slideDown('normal');
    			span.text(minus);
    		
    		
    		} else {
    		
    			$(this).next().slideUp('normal');
    			span.text(plus);
    		
    		
    		}
    	
    	
    	});

	
	
	});


})(jQuery);

You can see it in action above.