Webforumz Newsletter - January 2008
Tutorials
A simpler, better, menu system
Menu systems with images have been seen on site for quite some time now. Dead are the days when we should be using Javascript for rollovers since we can now achieve that same look with CSS only. But ... are you still using 1 image for each menu item?
How about I show you how to use 1 image for the whole menu? Yeah? Alright ... let's get started.
For the sake of this article, I will be using the same layout/design that I have used for the tutorial I wrote for December entitled - A websites' structure from A to Z but with a different look for the menu system.
Note: I will be using Photopshop CS2 in this tutorial but know that you can achieve the same results with any other graphics programs.
Our goal
Before we start, I will show what the final product should look like.
As you can see from the screenshot above, the menu has a slight gradient, the same font is used for the menu item as the title and a rounded-box is set on hover (which you can't see here) and when we are on a specific page.
All those things make it so that using CSS only is practically impossible. Using images for the menu is much simpler.
One image? Oh yeah!
So, now that you have seen what we want to achieve, let's start with our menu.
Nothing too complicated here right? Just a nice gradient background with the menu items using the Vintage font from the logo.
Now we want to add a hover effect, as well as a "selected" state, which will show a different style when a user is on a certain page.
I really like to use Guides in Photoshop as it shows me exactly the space I can use. So start by adding Guides. For this example, I have put vertical guides at 89px, 184px, 313px, 453px and 575px.
HOVER STATE
To get the hover state, start off by going into Photoshop and changing the canvas size from 42 to 84 (42+42) and make sure you get the space added below the menu we have now.
With that, you should get this:
Next, well duplicate the menu and move it down. To do with, I have put everything in Group
so all you need to do is right-click on the group and select Duplicate Group.
By selecting the Move Tool (or ctrl-V), bring the MENU 1 copy group, under the first menu.
With the bottom menu, you can style it the way you want. And with the Guides in place, it shows you how much space you have to play with.
For this example, I will add a green rounded box around each item and change the font color to black.
And there we have it ... our hover state.
"SELECTED" STATE
To add the selected state, we go through the same steps as with the hover state. So start by changing the canvas size to 126px.
Duplicate the second menu group and move this 3rd menu group under the second one.
For the selected state, I will only change the box color to a bright pink and the text back to white.
And we're done!
Now ... on to the tricky part ... the code.
The code
The HTML is pretty simple. You will notice that I have added a different class to each <li>. We will need this to position the proper menu item to show.
<div id="navigation">
<ul>
<li class="nav_home">
<a href="/">Home</a>
</li>
<li class="nav_about">
<a href="/company/about">About</a>
</li>
<li class="nav_services">
<a href="/services/">Services</a>
</li>
<li class="nav_portfolio">
<a href="/portfolio/">Portfolio</a>
</li>
<li class="nav_contact">
<a href="/contact/">Contact</a>
</li>
<li class="nav_blog">
<a href="/blog/">Blog</a>
</li>
</ul>
</div>
CSS – BASIC
We'll start with this
#navigation {
height: 42px;
margin-bottom: 5px;
background: url(../i/navigation-bg.jpg) repeat-x 0 0;
}
The navigation-bg.jpg background is simply the gradient part of the menu that we want to repeat for the whole width of the page.
#navigation ul {
margin: 0;
padding: 0;
height: 42px;
width: 663px;
background: url(../i/navigation.jpg);
}
#navigation ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
We have also set the menu as a background to the list to prevent the "flicker" effect in IE6
#navigation ul li a {
margin: 0;
padding: 0;
height: 42px;
display: block;
position: absolute;
text-indent: -9999px;
}
As seen in my previous tutorial (A websites' structure from A to Z), we will use Mike Rundle's image replacement technique to "hide" the text.
#navigation ul li.nav_home a,
#navigation ul li.nav_about a,
#navigation ul li.nav_services a,
#navigation ul li.nav_portfolio a,
#navigation ul li.nav_contact a,
li.nav_blog a {
background: url(../i/navigation.jpg);
}
Here we simple state the each <li> has the same background.
You should be getting this now in your browser. Notice that nothing will happen on hover since we haven't declared the positioning of the image yet.
CSS – THE TRICKY, POSITIONING, PART
Remember those guides we set up at the beginning? Well ... they will be of use again so keep them close.
We will also need to calculate the width of each menu items. In Photohop, it is quite easy with the Guides in place. All you need to do is make sure that you have Snap to > Guides ticked off so that when you select something, it will automatically start and end to the guides you have set up.
Here are the widths:
home: 89px;
about: 95px
services: 129px
portfolio: 140px
contact: 122px
blog: 88px
Another nice little trick is to put these down in the CSS so you have them handy.
/* Measurements for navigation
From the top to:
initial state: 0;
rollover state: 42px;
selected state: 84px;
From the left:
home: 0;
about : 89px;
services: 184px;
portfolio: 313px;
contact: 453px;
blog: 575px;
Width of each:
home: 89px;
about: 95px
services: 129px
portfolio: 140px
contact: 122px
blog: 88px
*/
Let's start with the HOME item.
#navigation ul li.nav_home a {
background-position: 0 0;
width: 89px;
left: 0;
}Simply, we justify that our image should start at the 0 0 position. The width of the link is 89px and we start it (from the left) at 0.
#navigation ul li.nav_home a:hover {
background-position: 0 -42px;
}For the hover, it's almost the same thing, except that we want the image under it. So ... we tell it to start at the 0 -42px position.
body#home_page #navigation ul li.nav_home a {
background-position: 0 -84px;
}And the selected state is the same logic as the hover except it's 84px from the top instead of 42px.
Now ... armed with the details that we copied in our CSS, you should be able to fill in the rest of the positioning and width for the other menu items.
#navigation ul li.nav_about a {
background-position: -89px 0;
width: 95px;
left: 89px;
}
#navigation ul li.nav_about a:hover {
background-position: -89px -42px;
}
body#about_page #navigation ul li.nav_about a {
background-position: -89px -84px;
}
#navigation ul li.nav_services a {
background-position: -184px 0;
width: 129px;
left: 184px;
}
#navigation ul li.nav_services a:hover {
background-position: -184px -42px;
}
body#services_page #navigation ul li.nav_services a {
background-position: -184px -84px;
}
#navigation ul li.nav_portfolio a {
background-position: -313px 0;
width: 140px;
left: 313px;
}
#navigation ul li.nav_portfolio a:hover {
background-position: -313px -42px; }
body#portfolio_page #navigation ul li.nav_portfolio a {
background-position: -313px -84px; }
#navigation ul li.nav_contact a {
background-position: -453px 0;
width: 122px;
left: 453px;
}
#navigation ul li.nav_contact a:hover {
background-position: -453px -42px;
}
body#contact_page #navigation ul li.nav_contact a {
background-position: -453px -84px;
}
#navigation ul li.nav_blog a {
background-position: -575px 0;
width: 88px;
left: 575px;
}
#navigation ul li.nav_blog a:hover {
background-position: -575px -42px;
}
body#blog_page #navigation ul li.nav_blog a {
background-position: -575px -84px;
}To finish this off, every page should have a ID in the body tag for the selected state. For example, on our home page we would have:
<body id="home_page">This will show the selected state for the HOME item. Like this:
body#home_page #navigation ul li.nav_home a {
background-position: 0 -84px;
}That's it! Hope this helped a few out there and found it useful.