As part of my work, I analyse existing websites developed by other people. These websites are often (though not always) greater than 3 years old. However, it constantly amazes me how many new websites continue to use old HTML/Javascript methods for creating buttons with rollovers. There IS a better way!
The method I learned several years ago doesn’t use Javascript. Instead, it uses pure CSS to create the buttons and the rollovers – all that is needed is a little knowledge of CSS and how the background property can be used on various elements.
When I create a website, I invariably create my menus as unordered lists. I’m going to show you how this is done, and how elegant menus can be created in this way.
I’ll be using my company’s website (which I created) at http://www.ck-services.co.uk as an example in this tutorial.
STEP 1: The HTML
First, you need to set-up the menu in the HTML.
In the HTML, I did it this way:
<div id="nav">
<ul>
<li id="home_button"><a href="/index.php"><span class="hide">Home</span></a></li>
<li id="about_button"><a href="/about.php"><span class="hide">About</span></a></li>
<li id="services_button"><a href="/services.php"><span class="hide">Services</span></a></li>
<li id="clients_button"><a href="/clients.php"><span class="hide">Clients</span></a></li>
<li id="blog_button"><a href="/blog/"><span class="hide">Blog</span></a></li>
<li id="contact_button"><a href="/contact.php"><span class="hide">Contact</span></a></li>
</ul>
</div>
I chose to use <ul> and <li> for Accessibility purposes, but you could equally use <div> tags in place of the <ul> and <li> tags.
Notice also the use of <span class=”hide”>Contact</span>. We’ll come to this later, in the CSS.
I set up a containing div with an ID of “nav”, then created the menu as an unordered list within the div.
I then created the list items, each with a unique ID. This is so we can apply a specific background to each list item. We’ll come back to this later, in the CSS.
STEP 2: Creating your buttons
Now you need to create your buttons in Photoshop or whatever graphics package you prefer to use. For each button, you need to create an ‘off’ state and an ‘on/rollover’ state.
On our website, the buttons are very simple – each of the buttons is black, and rolls over to blue. I created the graphic in Photoshop as follows:
As you can see, the ‘off’ state of the button is in the top half of the graphic. The ‘on/rollover’ state is in the bottom half.
So this is going to be the background for the list item with id=”home”.
Once we have all of our buttons ready, we can move onto the CSS.
STEP 3: The CSS
Here’s the CSS for the UL and LIs belonging to the enclosing DIV ID=”nav”:
#nav ul { list-style:none; }
#nav ul li { float: left; }
And for each DIV:
#home_button a { float: left; display:inline; width: 69px; height: 40px; margin: 0; background: url(../images/home_b.gif) no-repeat; background-position: 0 0; }
#home_button a:hover { background-position: 0 -40px; }
What this basically does is set the background of the A tag within the LI with ID=”home” to the graphic I showed you above. It also sets the position of the background image to its top-left corner.
Then the a:hover rule tells it to change the position of the background-image to the top-left corner of the rollover part of the graphic.
Here’s how we work this out:
We use Photoshop to work out the coordinates. We know that we’ll always be aligning to the left of the background image, so we only need the top coordinate.
I use the marquee tool to measure the height from the top of the graphic to the top of the rollover section. This height gives me the ‘top’ coordinate for the a:hover’s background:
We also used <span class=”hide”>Contact</span> inside each of the <li> tags above. I set up a class in the CSS called .hide which hides the button’s text from view. This is so the text doesn’t show up over the button, which can look messy if you’ve flattened the text onto the graphic itself, as I have.
The code I used to do this is simply:
.hide { display: none; }
STEP 4: Testing
Now go back to your page (having saved the HTML and CSS documents of course, and refresh it. You should see that the ‘home’ button is showing the black part of the button graphic only.
When you roll over the button, it should turn blue – that is, it should display the blue part of the button graphic.
Repeat for each of the buttons you wish to create.
That *should* be it. If it doesn’t work for you, check the div IDs match what you’ve set in the CSS, and check you have the co-ordinates of the rollover part of the graphic.
Good luck!
This also gives me a link to their website, and their phone number and address so I can contact them and make an appointment. Job done.
