WordPress dropdown menu with wp_nav_menu and CSS

WordPress 3.0 came with quite a number of awesome and useful features. That includes native navigational menus, which can be customized through the WordPress admin. (Dashboard –> Appearance –> Menus) . Many themes released nowadays support native menus. Let us learn how to add some Native menu support.

This is part 1 of the dropdown menu series.

To check whether your theme has native menu support, Proceed to “Wordpress admin-> Appearance –> Menus” (WordPress 3.0+ only) . If there is no support, following message will be displayed.

We can add the support by following through the below guide. Since it is not advisable to play with your blog’s theme, I have made a simple theme just for this purpose. It is a mod of Famous Kubrick of WP 2.0, and is named Axtra.  If possible, definitely try this on a local server in your Mac or windows.

{filelink=1}

wp_page_menu(); aka WordPress 3.0+ native menus support

wp_nav_menu() function does the work of displaying the wordpress menus that can be completely and easily customized through the admin. [codex reference]

Following code displays the menu.

<?php wp_nav_menu(); ?>

Like most wordpress functions do, wp_nav_menu() accepts arguments.

<?php wp_nav_menu(array( ‘theme_location’ => ‘Main-Menu’)); ?>

Complete arguments list is available in WordPress codex, Below are the options that we will be using through out this walkthrough.

1. theme_location : Theme location, i.e. Location of the menu in the theme structure.
2. menu_class: CSS class for the menu. (Default is ‘menu_class’ => ‘menu’).
3. fallback_cb : Fallback wordpress function to call, when wp_nav_menu is un available. default is wp_list_pages.
4. container_id : CSS ID to be assigned to the container(default is DIV tag) that wraps around the menu.
5. container_class : Similar to above, but this is CSS class.

Adding wp_nav_menu support to your theme

This involves the following procedure.

1. Register the menu : This can be done using register_nav_menu or register_nav_menus and initializing them.
2. Display the menu : Add wp_nav_menu function to the theme, wherever you want the menu to appear.
3. Style the menu : The key is adding the menu CSS class to wp_nav_menu and using that class with the CSS or JS dropdown solution.

Registering the menu

Open the theme’s function.php. If it is not present in your theme’s root directory, create a new file with the same name. Always name it in lowercase.

First thing to do is registering the menu location, through register_nav_menus() [Codex reference]

using register_nav_menus -

// Create a function for register_nav_menus()
function add_wp3menu_support() {

register_nav_menus(
		array(
		'main-menu' => __('Main Navigation'),
		'another-menu' => __('Another Navigation')
		)
	 );

}

//Add the above function to init hook.

add_action('init', 'add_wp3menu_support');

Good. Now theme has two menus, first one – registered as  “main-menu” – used to display the Main navigation below the header, and second – “another-menu” which may be used for diverse purposes (For e.g. add a menu to sidebar, custom post). The menus are to be initialized with the theme through wp_head() hook.

Display the menu

Now the registered menus need to be displayed. Here comes wp_nav_menu to the rescue. Insert the following code in the theme, where you want the menu to appear.

Usual location would be just below the header. I chose to include this in header.php , below the header div tag. I also added a div container around the menu with the CSS ID “navigation” (which can be used later for centering the menus).

<!-- a container that wraps around.-->
<div id="navigation">

<?php wp_nav_menu(); //displays the menu?>

</div><!-- end #navigation -->

Well, this displays the menu. Now we have two concerns. First – we registered two menus and second – we need to add dropdown menus in the next step. wp_nav_menu has got arguments that we can make use of.

<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', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function, which displays the pages of your blog.
	)
      );
?>

</div>

Let us look at the above code.

• ‘theme_location’ refers to the location of the menu in the theme.
• ‘menu_class’ refers to CSS class that is going to be used for dropdown menu.
• Similarly ‘container_id’ is the CSS ID for the div that surrounds the Navigation.
• ‘fallback_cb’ points to the function that will be used in case wp_nav_menu is not available. Default for ‘fallback_cb’ is the function wp_list_pages().

This completes setting up the “main-menu”. Similarly setup the “another-menu” for better idea.

Congratulations. Now your theme has wordpress 3.0 Menus support. Now check “Dashboard –> Appearance –> Menus”. The “no support” message is gone! Yes, you should now be able to create custom menus (Hint: Button “Create Menu”).

If you encounter any problems, verify with the included (modified) functions.php and header.php below.

{filelink=2}

Styling the menu with Superfish and similar

This is covered in a separate article here.

Creating a Menu via WordPress admin

1. Proceed to “WordPress admin –> Appearance –> Menus”.
2. Enter the menu name and Click “Create Menu”. You should now see a message “The your_menu_name_here menu has been successfully created.”
3. Now you can add custom links, pages or categories to your menu.
   1. 1. 1. In the custom Links field, you can enter the URL and Label(name it goes by) and click “Add to Menu”.
         2. In the Pages, Check those you need to appear in menu and click “Add to Menu”.
         3. Similarly add those in the categories.
         4. Now click “Save Menu”.
         5. Simply drag above and below to re-order and drag left and right to (un)indent the menu items.
         6. It is simpler and better if you have up to 3 levels of menu.

4. Look in the first box under “Theme locations”. Now select the menu you just created in the combo box “Primary Navigation”. Remember, We named our “main-menu” as “Primary Navigation”. Click Save.

   

   Your Menu has been successfully created.

Well done. Now reload and check your index page. Menu appears, but looks hideous.

And the CSS involved, with some explanation.

/* The container wrapping ul.dropdown */
#navwrap {
float:left;
width:100%;
background: #600;
background: -moz-linear-gradient( top, #600, #300); /* CSS 3 */
font: 1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
border-top:1px solid #999;
border-bottom:2px solid #000;
}

/* Top level Unordered list */
ul.dropdown {
list-style:none;
float:left;
width:100%;
padding: 0 10px;
}

ul.dropdown  li{
float:left; /* makes horiz list */
position:relative; /* hey Submenu ULs, appear below! */
}

ul.dropdown a {
padding:12px; /*space the items, occupy entire height too.*/
color:#eee;
text-decoration:none;
text-shadow:0 1px 0 #000;
}

/* Style the link hover */
ul.dropdown li:hover a {
background:#444;
border-top:1px solid #777;
border-bottom: 1px solid #000;
border-right:1px solid #666;
}

/* Displays the link as blocks. */
ul.dropdown li ul a {
display:block;
}

/* sub menus!!  */

ul.dropdown ul {
list-style: none;
margin:0; /* Appear just below the hovering list */
padding:0;
width:200px; /* specify the width. */
position:absolute; /* needed */
z-index:500; /* specify the order */
}

ul.dropdown li ul {
top:27px; /* Positioning:Calc with top level horz list height */
-moz-box-shadow:0 2px 10px #000; /* CSS 3 */
}

ul.dropdown ul ul {
top:0;
left:100%; /* Position the sub menus to right. */
}

ul.dropdown ul li {
float:none; /* umm.. Appear below the previous one. mmkay? */
}

/* Drop Down! */

/* Hide all the dropdowns (submenus) */
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }

/* Display the submenus only when li are hovered */
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}

ul.dropdown li * a:hover {
/* Change color of links when hovered */
background: #600;
background: -moz-linear-gradient( top, #200, #400); /* CSS 3 */
border-bottom:1px solid #900;
border-top:1px solid #222;
}

Upcoming

Part 2 of this Guide – WordPress dropdown menu with superfish

Part 3 of this Guide – WordPress dropdown menu with CSS3.

Reference

WordPress codex reference : register_nav_menus()

WordPress codex reference : wp_nav_menu()

WordPress codex reference : wp_page_menu() and wp_list_pages