Web Media Magazine - Web development magazine, including Photoshop tutorials, PHP tutorials, CSS tutorials, web news and trends.

Make a preloading image rollover & navigation for WordPress

posted by Danny on August 23rd, 2009, in CSS, Wordpress | 2 Comments

In this tutorial I’m going to demonstrate how to create an image rollover that preloads. This means when you hover over your button it won’t delay when changing. I will then go on to show you how to intergrate this into your WordPress blog for displaying categories.

See the live demo here

Step 1 – HTML

To start with lets write the basic HTML required to make a navigation with buttons. Converting it to WordPress will be covered later in the post as I want you to see the basic HTML first. We will need a div container to hold the buttons and an unordered list (ul) with list items (li) which will be the buttons.

<div id="navi">
<ul>
    <li><a href="#">Home</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">Entertainment</a></li>
       <li><a href="#">Lifestyle</a></li>
       <li><a href="#">Sports</a></li>
   </ul>
</div><!--navi-->

Step 2 – Image Rollover

The next step will be creating and designing your buttons and navigation. My navigation bar looks exactly the same as the button before rollover. In Photoshop I created an image 1px wide by 80px high, I then split my image into two halves, the bottom is the image before rollover and the top is the button on rollover. I used layer options to achieve the gradient effect. It’s only 1px wide because it can be repeated in CSS which will speed up loading times.

Step 3 – CSS

Now we have our two images lets apply the CSS.

To start with I have reset the styling for unordered lists and list items so we can apply our own style later:

ul, li {
margin: 0;
padding: 0;
list-style:none;
}

Next I apply the styling to our navi div. This will repeat our first image all the way across it. Note, on the background styling I have added “0 -40px”, this will only show the bottom part of our naviagtion image. Note “margin:auto;” is there to center the div in the middle of the page. You may not need this as the div may already be contained.

#navi {
margin:auto;
width:960px;
height:40px;
background: url("navi.png") 0 -40px repeat-x;
}

Now to reapply styling to our unordered list and list items so that the list will be horizontal and span across the entire navigation div.

#navi ul {
text-align:left;
overflow:hidden;
width:960px;
}
 
#navi li {
float:left;
margin:0px;
}

And finally we apply styling to the links before and after hovering over them. The “float:left;” and “display:inline;” are also for displaying the links horizontally. The background, like in our navi div, is being pushed down 40px so it only shows the bottom section. On hover the background is being shown from the top “0 0px;”, therefore creating the rollover effect. The rest is basic styling.

#navi li a {
font-size:12px;
font-weight:bold;
color:#333333;
padding:11px 13px 14px 13px;
display: block;
text-decoration: none;
float:left;
display: inline;
background: url("navi.png") 0 -40px repeat-x;
}
 
#navi li a:hover {
	background-position: 0 0px;
	color:#ffffff;
}

Below is all the CSS:

ul, li {
margin: 0;
padding: 0;
list-style:none;
}
 
#navi {
margin:auto;
width:960px;
height:40px;
background: url("navi.png") 0 -40px repeat-x;
}
 
#navi ul {
text-align:left;
overflow:hidden;
width:960px;
}
 
#navi li {
float:left;
margin:0px;
}
 
#navi li a {
font-size:12px;
font-weight:bold;
color:#333333;
padding:11px 13px 14px 13px;
display: block;
text-decoration: none;
float:left;
display: inline;
background: url("navi.png") 0 -40px repeat-x;
}
 
#navi li a:hover {
	background-position: 0 0px;
	color:#ffffff;
}

Converting our navigation into WordPress for displaying categories

Replace your existing HTML with:

<div id="navi">
<ul>
<?php wp_list_categories('title_li=&depth=1'); ?>
</ul>
</div><!--navi-->

Notice that everything is the same apart from list items. The PHP code loops through the categories and prints a list item for each one. The “title_li” means print the category name in the list item. “depth=1″ means only show parent categories. For example by changing it to, “depth=2″, it will list parent categories and their sub categories.

See the live demo here

I hope you enjoyed this post!