Wordpress navigation menu with rollovers

In this tutorial we will just create a basic text link navigation menu and then apply CSS to make it look all nice with rollover effects.

We will use the default wordpress theme for this tutorial that comes with wordpress when you install it. The best place for a navigation menu in a wordpress template is in the header.php file, so that is where we will create it. Open the header.php file of the theme and under the following code:

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
<div class=”description”><?php bloginfo(’description’); ?></div>
</div>
</div>

add this code:

<div id=”menulinks”>
<ul id=”navlist”>
<li><a href=”<?php echo get_settings(’home’); ?>”>Home</a></li>
<?php wp_list_pages(’title_li=’); ?>
</ul>
</div>

What this code does is defines a div “menulinks” which we will worry about later and then creates a list of links, it creates the Home link and then adds all the pages of the blog with the <?php wp_list_pages(’title_li=’); ?> command.

You should now have a list of links that looks a bit like this:

• Home
• Page 1
• Page 2
• Page 3
• etc.

However this isn’t very nice looking, so we want to add css to change the look and layout of the menu. Open the style.css file and add the following code:

#menulinks {
height:50px;
width:95%;
margin-top:10px;
margin-left:20px;
margin-right:10px;
clear:both;
background-color:#73a0c5;
text-align:left;
}

ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:100%;
}

ul#navlist li {
font-size:10pt;
display:inline;
list-style-type: none;
}

ul#navlist li a {
font-family:Arial;
font-size:14px;
font-weight:bold;
text-align:center;
color: #FFFFFF;
height:33px;
padding-top:17px;
padding-left:15px;
padding-right:15px;
background:none;
display:block;
float:left;
text-decoration: none;
}

ul#navlist li a:hover {
background-color:#2e4876;
}

This is what it should now look like:

You can change the CSS code to change how it looks, for instance you can change:

ul#navlist li a:hover {
background-color:#2e4876;
}

to a different colour or you could create an image to be the rollover, for example:

To do this I created an image 50 pixels high and saved it as menuhover.png to the images folder, I then changed the code above to:

ul#navlist li a:hover {
background-image:url(images/menuhover.png);
}

Anyway, thats it, you now know how to create a simple navigation menu for wordpress, you can also use this on standard webpages as well by simply adding this code wherever you want it:

<div id=”menulinks”>
<ul id=”navlist”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Page 1</a></li>
<li><a href=”#”>Page 2</a></li>
<li><a href=”#”>Page 3</a></li>
</ul>
</div>