Brain Food for Web Developers


CSS Horizontal Menu Bar with Icons

Example of menu icons for "Home", "Services, "Products"

A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements.

Update: Since this article is quite old now you might want to look at a newer one about CSS Sprites with Pseudo Elements.

First of all you’ll need some icons. There are loads of great sites to buy premium icons (Picto Foundry, Icon Jar, Glyphicons, & more). There are also a lot of free icon sets out there.

Grab yourself some icons and lets get to work on the code. We’ll start with the HTML for your menu. Here’s an example of a basic horizontal menu bar:

<nav id="main-menu">
     <ul class="nav-bar">
          <li class="nav-button-home"><a href="/">Home</a></li>
          <li class="nav-button-services"><a href="#">Services</a></li>
          <li class="nav-button-products"><a href="#">Products</a></li>

Next up comes the CSS. First we create a simple horizontal menu:

#main-menu .nav-bar { list-style:none;}
#main-menu .nav-bar li { display:inline; padding: 0 10px; }

Now we customize the links:

#main-menu .nav-bar li a {
padding-left: 25px; /* Create padding on the left where the icon goes */
text-decoration: none;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;

Finally we add the icons.

.nav-bar .nav-button-home a { background:url("images/home.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-services a { background:url("images/services.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-products a { background:url("images/products.gif") no-repeat 0px -2px transparent; }

Do you have any ideas on how create a great looking menu? Post a comment and let me know.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.