I’m big into horizontal menus. I think the majority of the web community are. In my eyes their only pitfall is the general inability to expand past a set width if you wish to add more links in. But who wants to do that, anyway?

I’m aware that there’s a multitude of different ways to create the classic ‘hover-over’ menu. Either with CSS or good old javascript, the way Dreamweaver used to throw it out, and possibly still does. There are several reasons why I choose not to use javascript hover-over effects; a) It’s ugly, just to look at. Little brackets and weird symbols and colons everywhere, b) In some way or another it’s going to want to attack your site’s accessibility, and we just can’t let that happen, c) CSS is just better. In every way. It’s cleaner, easier to apply and moderate and just stays out of the way in it’s little file. With javascript you’d either have to throw plenty of dirty code into your markup, or create another external .js file. Why bother?

Of course CSS isn’t without it’s flaws. Wait – did I just say that? What I meant was CSS is perfect in every way and does everything I want it to. It does, really. The only thing I could ask would be the ability to have the hover-over fade in or rise up to create some nice ‘ajax’ effects. But wait – then we’d be back at javascript, which defies our objective.

Even CSS menus can be achieved in a number of ways, I used to use a method where the original menu button and it’s roll-over button were 2 different images, the 2nd called up by CSS when the mouse hovered over it. I was finding that the browser was having to load the image every time, thus creating a ‘lag’ effect as you hovered over a menu item. Which was insulting.

So I will now embark on explaining how I now go about creating my faithful horizontal menus. For the purpose of this tutorial and to save me time, I’m going with a simple blue bar – 800px x 40px. No glossy effects or 3d optical illusions. A plain blue bar, as you hover over a menu item it’s background will glow a lighter blue. Nice and simple.

I’ve originally designed my menu in [generic image-editing application] aka Photoshop as below. The menu itself will be 800px wide by 40px high. The individual buttons will be 100px wide. So, upon designing the menu as how it will look in general and if one of the links is hovered over, I’ve set to work creating images of the individual links.

I used to create 2 images for each link – 1 for the original button as it will appear on the menu, and 1 for the hover-over. Now instead, I create 1 image that incorporates both, so instead of 40px high it will be 80px high and display the original button above the hover button, like so:

I do this for all the links – so in this case 5 images: Home, Blog, About, News, Contact and named them appropriately (eg. menuhome.png). I’ve created an image of the menu background without the links and I must also create a transparent image. This is where my method may vary from many others. In some cases, your menu links in the HTML file will be simple text links. But I don’t want text, as the CSS ‘background’ image will be providing that. So to replace the standard text in the <a href> anchor, I will create a transparent image the dimensions of the button – 100px x 40px, this button will called ‘menubutton.png’.

On to the code. HTML first. The 5 links will be in a nice semantic <div>, organised by an unordered list <ul>. Here goes:

<div id=”menu”>

<ul>

<li id=”home”><a href=”/” title=”Home”><img src=”/images/menubutton.png” alt=”Home” /></a></li>

<li id=”blog”><a href=”/blog” title=”Blog”><img src=”/images/menubutton.png” alt=”Blog” /></a></li>

<li id=”about”><a href=”/about” title=”About”><img src=”/images/menubutton.png” alt=”About” /></a></li>

<li id=”news”><a href=”/news” title=”News”><img src=”/images/menubutton.png” alt=”News” /></a></li>

<li id=”contact”><a href=”/contact” title=”Contact”><img src=”/images/menubutton.png” alt=”Contact” /></a></li>

</ul>

</div>

As you can see, I’ve given each <li> an id. This is so each button can be individualised in the CSS. Now on to the CSS, which I’ll break down as we go along.

#menu {
width: 800px;
height: 40px;
float: left;
display: inline;
background: url(images/menubackground.png) no-repeat;
}

*This lays out the menu bar, specifying it’s height, width, position and background.

#menu ul li {
width: 100px;
height: 40px;
float: left;
display: inline;
background-position: top;
}

*This styles the general list items in the menu. Height, width and ensuring that the background images are originally at the top. Now we style the individual items with their own background image:

#menu ul li#home {
background: url(images/menuhome.png) no-repeat;
}

*That’s it for the standard button! Simple. Now we apply it’s hover-over:

#menu ul li#home:hover {
background-position: bottom;
}

*All we’re doing is pushing the background image up to show it’s bottom half. Because the image is already loaded, there’s no waiting, it’s a nice quick transition.

That’s it for the CSS. There’s no need to style the ‘ul li a’ because it’s just a transparent image – all the design is in the background image you’ve already created.

This isn’t always necessary. If you wish to use standard text links you can use the exact method as above, but with adding text styles as well. The reason I use this method is because it gives me the ability to create really attractive buttons that couldn’t be achieved with standard text and CSS alone.

Anything I’ve done wrong, if you don’t quite understand how I’ve explained this method or you’d like to correct me and provide a better way – get in touch or leave a comment. I welcome constructive criticism!