WordPress dropdown menu using pure CSS dropdown framework

CSS dropdown menu framework is a free and pure CSS dropdown menu solution. It clearly has some advantages over javascript based solutions. Well, It is cross browser compatible, completely customizable, fast and does not rely on javascript (except for IE 6 and earlier). Let us see how to employ it in a wordpress theme.

WordPress and CSS drop-down Framework

Always perform your wordpress experiments on a Local server(Mac, Windows). Optionally, you can download my sample theme made just for this purpose, Axtra. Download Here.

1. First things first. Choose any wordpress theme with native menu support. Or, you can use Axtra with this guide. Insert the following code into the theme’s functions.php to quick enable menu support.

   /* Create a function for register_nav_menus() */
   function add_wp3menu_support() {
   	register_nav_menus(
   		array(
   		'main-menu' => __('Main Navigation'),
   		'another-menu' => __('Another Navigation')
   			)
   	 );
   }
   // Initialise the menus with the theme.
   add_action('init', add_wp3menu_support);

2. Create and select your custom menu through the wordpress admin. (wp-admin –> Appearance –> Themes –> Menus) .
3. Download CSS drop-down menu framework from here. Extract the folders css and js into the wordpress theme folder.  Framework categorizes the layout and design into individual style sheets.
4. Next, we need to load these stylesheets. We open the header.php and include these two lines before <?php wp_head(); ?> hook. Don’t close the file yet.

   <!-- The Css dropdown framework's layout -->
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/dropdown/dropdown.css" type="text/css" media="screen" />
   <!-- And the menu's design aka theme-->
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/dropdown/themes/default/default.css" type="text/css" media="screen" />

5. Framework uses the class dropdown to identify the menu. We will use  wp_nav_menu()’s arguments to do this for us.

   <div id="navigation">
   	<?php
   	  wp_nav_menu( array(
   		'theme_location' => 'main-menu', // Setting up the location for the main-menu, Main Navigation.
   		'menu_class' => 'dropdown', //Adding the class for dropdowns
   		'container_id' => 'navwrap', //Add CSS ID to the containter that wraps the menu.
   		'fallback_cb' => 'wp_page_menu'
   			)
   		);
   	?>
   </div>

6. On reloading the theme, dropdown menu appears with the default style that we included.
   

   CSS dropdown menu with default style.

7. Now we have two options. One, is to modify the default.css file located in css/dropdown/themes/default/default.css . And the second – copy the default file and image sub dir to same directory as dropdown.css (css/dropdown/) and modify it. I chose to go with the second. Whatever you choose, make sure to use the correct paths. So my  header.php reads like -

   <!-- The Css dropdown framework's layout -->
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/dropdown/dropdown.css" type="text/css" media="screen" />
   <!-- And the menu's design aka theme -->
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/dropdown/axtra.css" type="text/css" media="screen" />

8. Now all that’s remaining is styling the menu. Here are the contents of Axtra’s css/dropdown/axtra.css.

/* Container wrapping the menu  */
#navwrap {
    float: left;
    width: 100%;
    font: 1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
	/* Now the theme */
	background: #600;
	background: -moz-linear-gradient(top, #600, #200);
	background:	-webkit-gradient(linear, left bottom, left top, from(#200), to(#600));
}
ul.dropdown {
}
ul.dropdown li {
	padding: 10px 12px;
}
ul.dropdown ul li {
	border-style: solid;
	border-width: 1px;
	border-color: #777 #222 #000 #222;
	background-color: #444;
	color: #FFF;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
	background-color: #444;
}
ul.dropdown ul li:hover,
ul.dropdown ul li.hover {
	background-color: #600;
	background-image: -moz-linear-gradient(top, #200, #600);
	background-image: -webkit-gradient(linear, left bottom, left top, from(#600), to(#200));
}
ul.dropdown a:link,
ul.dropdown a:visited	{ color: #ddd; text-decoration: none; }
ul.dropdown a:hover		{ color: #F9F9F9; }
ul.dropdown a:active	{ color: #FFF; }

/* -- level mark -- */

ul.dropdown ul {
	width: 150px;
	margin-top: -1px;
	-moz-box-shadow: 0 2px 5px #222;
	-webkit-box-shadow: 0 2px 5px #222;
}

But, What about menu arrows?

Framework needs a CSS support class to display arrows. For now, wp_nav_menu have no direct options to do this except defining a custom Walker class.

CSS framework applies the arrow images to the list items<li> with additional class name dir. Let us look at the below code borrowed from Goldenapplesdesign.

// Check for submenus. Code by Nathaniel Taintor of goldenapplesdesign.com
function check_for_submenu($classes, $item) {
	global $wpdb;
	$has_children = $wpdb->get_var("SELECT COUNT(meta_id) FROM wp_postmeta WHERE meta_key='_menu_item_menu_item_parent' AND meta_value='".$item->ID."'");
	if ($has_children > 0) array_push($classes,'dir'); // assign the class dir to list items with sub menu.
	return $classes;
}

add_filter( 'nav_menu_css_class', 'check_for_submenu', 10, 2);

Explanation: Above code queries for the list items with submenus. If sub menus are present, function adds the CSS class dir to parent list item<li>. This is accomplished through the  nav_menu_css_class hook. Arrows are transparent png files present in the sub directory “images”, residing inside the dropdown folder (css/dropdown/images/)

Now the respective code.

ul.dropdown li.dir > a {
	padding-right: 20px;
	background-image: url(images/nav-arrow-down.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	display:block;
	z-index:599;
}
ul.dropdown ul li.dir > a {
	padding-right: 20px;
	background-image: url(images/nav-arrow-right.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	display:block;
	width:115px;
	z-index:599;
}

And the shadows can be added with some CSS3.

Here is the preview of the finished dropdown menu .

CSS dropdown framework menu with Finished style

Little housekeeping and some notes

• Once you have got the perfect design, you can delete all the unnecessary files in the dropdown folder. Just make sure not to delete the required files – layout  dropdown.css , design (here, axtra.css) and the sub folder images.
• You can easily transform the menu with additional css classes. For example – dropdown-vertical and dropdown-upward. You need to include the required stylesheets though (for Vertical dropdown menu, include dropdown.vertical.css).
• If you don’t want to clutter up your header.php, You can always add it , the proper way.

  /* Add styles, the proper way */
  // This code goes in functions.php
  function add_styles() {
  	$themedir = get_bloginfo('template_url');
  	// register the stylesheets
  	wp_register_style( 'dropdown-layout', $themedir.'/css/dropdown/dropdown.css', false, false);
  	wp_register_style( 'dropdown-axtra', $themedir.'/css/dropdown/axtra.css', false, false);
  	// and load them.
  	wp_enqueue_style('dropdown-layout');
  	wp_enqueue_style('dropdown-axtra');
  }
  
  // You can also use wp_head hook.
  add_action( 'wp_print_styles', 'add_styles');

• CSS dropdown menu framework can peacefully co-exist with other javascript solutions, provided we use different css class names. we can even make the menu solutions switchable through theme’s admin page.

Thanks for reading,

Kavin