Cheesetoast » icon set http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.9 CSS Horizontal Menu Bar with Icons http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/ http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/#comments Fri, 31 Aug 2012 17:36:39 +0000 http://www.cheesetoast.co.uk/?p=673 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. Continue reading

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
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>
     </ul>
</nav>

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.

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/feed/ 0