Navigation with ICONS

n every internet application I build – within and out with Zen Elements – I attempt to stay away from creating menus made entirely from images. In my oppinion, text within a menu system should be just that; text. This will result in a more crisp, sharp and legible menu, regardless of the application reading it, the magnification of the page, etc. Maybe it is just me but should we not be able to create good looking AND accessible menus?
Below is the Markup and CSS used to create the following Icon Supported Menu.

Click here for a live example (opens in a new window).

The Basic Markup

0. navigation.html
1. <ul class="nav">
2.   <li class="home"><a href="#link">home</a></li>
3.   <li class="about"><a href="#link">about</a></li>
4.   <li class="work"><a href="#link">work</a></li>
5. </ul>

The CSS

style.css.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
.nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
  li.home {background:url(img/nav-home.gif) top left no-repeat;}
   li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
   li.about {background:url(img/nav-about.gif) top left no-repeat;}
  li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
   li.work {background:url(img/nav-work.gif) top left no-repeat;}
  li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}
.nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}
 .nav li a:hover {color:#C00;}


******************************************************************************

<style type="text/css">

 .nav {width:550px; height:100px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
 .nav li {float:left; width:100px; height:100px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
   li.home {background:url(img/nav-home.gif) top center no-repeat;}
   li.home:hover {background:url(img/nav-homeHover.gif) top center no-repeat;}
   li.about {background:url(img/nav-about.gif) top center no-repeat;}
   li.about:hover {background:url(img/nav-aboutHover.gif) top center no-repeat;}
   li.work {background:url(img/nav-work.gif) top center no-repeat;}
   li.work:hover {background:url(img/nav-workHover.gif) top center no-repeat;}
 .nav li a {display:block; padding:50px 0px 0px 0px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none; text-align:center}
 .nav li a:hover {color:#C00;} 
</style>

The Basic Markup

0. navigation.html
1. <ul class="nav">
2.   <li class="home"><a href="#link">home</a></li>
3.   <li class="about"><a href="#link">about</a></li>
4.   <li class="work"><a href="#link">work</a></li>
5. </ul>

With menus becoming more heavily styled in keeping with more sophisticated website designs, it is fair to say that if you are wanting to use a particular font – and there is NO way a web compliant one will do – then you are going to have to use images, flash or magic of some sort. It is important to at least try to retain some level accessibility though, as much as possible. Pretty will only get you so far ;)