How to add individual icons to Wordpress generated menu?

This short tutorial hopefully will be a begining of the series.

I was redesigning Unified Communications website and my goal was to make it similar to CDSoft website. CDsoft’s website is based on Wordpress engine but it is using templates extensivelly to make Flash Tab Menu work properly (I know, it could be done better). Anyway, I didn’t want to create another flash menu for the UC website and wanted to make it look consistent at the same time.

UC website is based on Wordpress but it has less content and it’s focused only on one solution CDSoft provides, the Unified Communications from Microsoft.

Let’s start then. First, I’ve placed my main menu into header.php and this is how it looks:

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
</div>

So, let’s have a look on how generated HTML code looks like:

<div id="main-nav">
<ul>
<li class="page_item page-item-6"><a href="http://localhost/unified/index.php/about-uc/" title="About UC">About UC</a></li>
[...]
</ul>
</div>

I need my menu items to be highlighted on HOVER and to be highlighted same way when a section is selected. This highlight is that subtle gradient. Also I want each menu item to have a different icon. I decided that highlight will be done through a:HOVER and icons will be done through a span. So I need to have <span></span> added around menu name. With Wordpress you can do it easily by using wp_list_pages() options. Here’s how it looks now.

<div id="main-nav">
<ul>
<?php wp_list_pages('title_li=&link_before=<span>&link_after=</span>&depth=1'); ?>
</ul>
</div>

OK, so by default, without any styling our menu looks like this:

So, we need to add some styling now and here it goes:

#main-nav {
width: 920px;
height: 161px;
margin: 0 20px;
overflow: hidden;
background: url("img/bgnd-main-nav.gif") bottom repeat-x;
}
#main-nav ul {
margin: 0 0 0 26px;
}
#main-nav ul li {
list-style: none;
display: inline;
}
#main-nav ul li a {
display: block;
float: left;
width: 120px;
height: 128px;
margin: 0 2px;
color: #333;
text-decoration: none;
}
#main-nav ul li a:HOVER {
background: url("img/bgnd-menu-item-hover.gif") repeat-x;
}
#main-nav ul li.current_page_item a,
#main-nav ul li.current_page_parent a {
background: url("img/bgnd-menu-item.gif") repeat-x;
}

This styling produces menu that looks like this:

Now, I have to style that <span> element and add classes for icons. Complete CSS code looks like this:

#main-nav {
width: 920px;
height: 161px;
margin: 0 20px;
overflow: hidden;
background: url("img/bgnd-main-nav.gif") bottom repeat-x;
}
#main-nav ul {
margin: 0 0 0 26px;
}
#main-nav ul li {
list-style: none;
display: inline;
}
#main-nav ul li a {
display: block;
float: left;
width: 120px;
height: 128px;
margin: 0 2px;
color: #333;
text-decoration: none;
}
#main-nav ul li a:HOVER {
background: url("img/bgnd-menu-item-hover.gif") repeat-x;
}
#main-nav ul li.current_page_item a,
#main-nav ul li.current_page_parent a {
background: url("img/bgnd-menu-item.gif") repeat-x;
}
#main-nav ul li a span {
width: 120px;
height: 18px;
overflow: hidden;
padding: 110px 0 0 0;
display: block;
}
#main-nav .about-uc {
background: url("img/menu/microsoft-uc.png") top center no-repeat;
}
#main-nav .products {
background: url("img/menu/round-table.png") top center no-repeat;
}
#main-nav .accessories {
background: url("img/menu/plantronics.png") top center no-repeat;
}
#main-nav .ip-phones {
background: url("img/menu/uc-phone.png") top center no-repeat;
}
#main-nav .faq {
background: url("img/menu/faq.png") top center no-repeat;
}
#main-nav .blog {
background: url("img/menu/blog.png") top center no-repeat;
}
#main-nav .about-cdsoft {
background: url("img/menu/about-cdsoft.png") top center no-repeat;
}

Menu with added <span> styling looks like this (note that no icons are displayed yet):

Styling of <span> element moved the page title to the bottom leaving space for menu icons. Now it’s time to add these colorful icons to the menu. We’ll use simple jQuery function that can be placed in header.php file. Here’s the code:

<script type="text/javascript">
$(document).ready(function() {
equalHeight($(".column"));

var menus = new Array("about-uc", "products", "accessories", "ip-phones", "faq", "blog", "about-cdsoft");
for (j=0; j < menus.length; j++){
//$("#main-nav li:eq("+j+") a span").addClass(menus[j]);
}
});
</script>

And this is how our menu looks like now:

Visit Unified Communications website for more detailed look on how this works.

Enjoy!

This entry was posted on Friday, June 26th, 2009 at 10:42 am and is filed under How To, Tutorials, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.