Image nav bars using css that are still usable with images (and css) turned off. The technique uses a blank <em>, but I'm happy to live with that for the sake of accessibility!
If you want to see it in action go to the working example below or to my own site - jpc-design.com.
<div id="nav"> <ul id="menu"> <li id="homemenu"><a href="#1" title="Home">Home<em></em></a></li> <li id="aboutmenu"><a href="#2" title="About">About<em ></em></a></li> <li id="portmenu"><a href="#3" title="Portfolio">Portfolio<em></em></a></li> <li id="hostmenu"><a href="#4" title="Hosting">Hosting<em></em></a></li> <li id="blogmenu"><a href="#5" title="Blog">Blog<em></em></a></li> <li id="contmenu"><a href="#6" title="Contact">Contact<em></em></a></li> </ul> </div>
A simple <ul> in a <div> is all you need to start. Each <li> need its own 'id' is, in the css, you can tell it what part of the image to use. The extra <em> on the <li>s helps with the accessability/no images part. The <em> can be empty or have useful things like titles or accesskey info the.
A gif (could be a jpg or png) with one row for the 'normal' state and one for the 'ohver' state. Both rows must be the same height! (30px in this case so the image is 60px high)
#nav {
/* If you want, you can add position:absolute;
and have the bar exactly where you want on the page */
height: 30px; /* the size of the total image replacement */
width: 565px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul#menu{
list-style:none;
margin:0;
padding:0;
}
#menu li,#menu li a {
height:30px; /* this and line height needs to be the same and is the height of the nav bar */
position:relative;
display:block;
line-height:30px;
border: 0;
}
#menu li {
float: left; /* gets the items in place */
display:inline;
}
/* mac hide \*/
#menu li,#menu li a {overflow:hidden;}
/* end hide*/
#menu a { /* how the 'no images' text looks */
font-size: 0.8em;
color: #000;
font-weight: bold;
text-decoration: none;
line-height: 0;
text-align: center;
}
#menu a:hover {
text-decoration: underline;
}
/* the basic size/height of the nav bar items */
#menu li em {
position:absolute;
left:0;
top:0;
display:block;
height:30px;
cursor: pointer;
border: 0;
}
/* the size/width/position of each item - use the background to show the correct bit of the image */
li#homemenu a, li#homemenu em {
background: url(nav01.gif) no-repeat;
background-position: 0 0;
width: 80px;
}
li#aboutmenu a, li#aboutmenu em {
background: url(nav01.gif) no-repeat;
background-position: -80px 0;
width: 87px;
}
li#portmenu a, li#portmenu em {
background: url(nav01.gif) no-repeat;
background-position: -167px 0;
width: 115px;
}
li#hostmenu a, li#hostmenu em {
background: url(nav01.gif) no-repeat;
background-position: -282px 0;
width: 102px;
}
li#contmenu a, li#contmenu em {
background: url(nav01.gif) no-repeat;
background-position: -384px 0;
width: 81px;
}
li#blogmenu a, li#blogmenu em {
background: url(nav01.gif) no-repeat;
background-position: -465px 0;
width: 100px;
}
/* controls the hover with the background image moving sideways
(for the right 'part' and down 30 for the hover state */
ul#menu li a:hover{visibility:visible}/* needed for ie to work*/
li#homemenu a:hover em{background-position:0 -30px}
li#aboutmenu a:hover em{background-position:-80px -30px}
li#portmenu a:hover em{background-position:-167px -30px}
li#hostmenu a:hover em{background-position:-282px -30px}
li#blogmenu a:hover em{background-position:-384px -30px}
li#contmenu a:hover em{background-position:-465px -30px}
/* If you want an 'active' state as well add lines like:
li#homemenu a:active em{background-position:0 -60px}
*/
The image can be located anywhere on the server, as long as you get the path right in the css! Each of the li#menuitem commands, moved the background image to show the section in the right place in the nav bar. So when making the bar, it's a good idea to note how wide each item is and where relative to the left on the image it starts! The nav items don't have to be 'touching', as long as you can tell the css where in the image they need to be, they can all be different widths and heights if you want!
Try turning off the images and you still have a useable nav bar (which can also be styled how you want). This has been test (and works - with and without images!) in:
I can't honestly remember where I first got this from! But it's one that I've used/hacked around to my own needs and works!