Use CSS to create a Web site navigation menu with icons

In every Internet application I've created, I've tried to avoid creating menus that are entirely composed of pictures. In my opinion, the menu system should use text. Doing so also makes the menu cleaner, clearer and easier to read, regardless of how the application reads it, or when the page is magnified. Maybe it's just my idea? But can't we create a menu that looks good and works?

Here is the code and style to create the following icon-supported navigation menu.

View Demo: http://www.zenelements.co.uk/blog/images/web-tutorials/icon-supported-navigation/live-example.html

Basic label

<!--navigation.html-->

<ul class= "nav" >

<li class= "Home" ><a href= "#link" >home< /a></li>

<li class= "about" ><a href= "#link" >about</a></li>

<li class= " Work "><a href=" #link ">work</a></li>

</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-deco　　Ration:none;}

. Nav li a:hover {color: #C00;}

In a more granular web design, menus can become more style-enabled. To be fair, if you want to use a particular font--and in fact few sites allow it--then you need to use pictures, flash, or some magic. Finally, it is important to keep the ease of use as much as possible.

The best way to learn is to practice, try to move the icon to the back of the text, or create a vertical navigation menu system with an icon.

God fly think, in fact, this is a very simple tutorial, is an entry-level, there is no advanced technology, just provides a way to make a horizontal navigation menu with icons. From the performance of the site, this is not very good, now the most recommended method is CSS Sprite, that is, the use of those pictures in a picture file, and then through the background-position to call respectively. In addition, for the use of special text, the situation has a little change, is that CSS3 has begun to support the site's embedded fonts.