CSS Menu With Icons

Firstly lets create our navigation in photoshop, create a new document 600×200 pixels with a black background. Create a rectangle 600×40 pixels with rectangular marquee tool, you can create specific sizes by changing the style to “fixed size”.

Fill your navigation with the color black then add these layer styles.

You should have something like this.

Select the rectangular marquee tool again and create a selection like this.

Fill with the color white, then click on your naviagtion layer whilst holding down the ctrl key on the key board to make a selection.

Once you have made the new selection goto, “select > inverse” then hit the delete key. You should be left with this.

Lower the opacity to about 5% then add your naviagtion text.

Now select the rounded rectangle tool and create a small rectangle next to your navigtation text. The icons should be no bigger than 32×32 pixels. Althou you can make them bigger if you want you just need to adjust the CSS code when we come to code it. Add these layer styles to each of your round rectangles.

Your navigation should now look like this.

Inside the round rectangles we want to add our icons, im going to use some preset shapes in the custom shapes libary that came free with photoshop. Once you have chosen your icons and added them inside the rectangles add this outer glow.

Your navigation should looks something like this.

Looks abit cramped up, but it doesnt matter as we can set the spacing of each item in css. For this bit we need to zoom in abit, select the pen tool with the color #008aff, draw a line underneath your 1st item.

Now add this layer style to your line.

Thats it for your naviagtion, you end result should be something like this.

Now that we’ve finished we need to slice our navigation up, so go ahead and create a new folder on your desktop called navigation, then inside that folder create another 2 folders called “icon_images” and “navigation”. Inside the “icon_images” folder we need to save each icon as seperate images dont forget they need to be 32×32 pixels and on a transparent background, save each of them as .PNG files. Heres mine.

We also need 2 chunks of our navigation one being the main background and the other one being the mouseover. Head back over to your naviagtion which should still be in photoshop, hide all your layers apart from your main navigation and the mouse over.

Make each seperate image 300 pixels wide, you may need to stretch your mouse over line over more so it fits like the image below. Save these 2 files as “nav_background” and “nav_hover”.

Next you need to create an empty text file and save it as styles.css in your root naviagtion folder. After you’ve done that its time to open dreamweaver. Create a new html document and straight away save it as index.html or whatever you want to call it save the file in your root folder with your styles.css file. Edit your title text and link your style sheet.

[sourcecode language=’html’]

[/sourcecode]

After this bit of code we need to map out our navigation using the standard UL and LI tags which looks like this.

[sourcecode language=’html’]

[/sourcecode]

You will notice that next to each link there is a “EM CLASS” this will refer to our icons in the style sheet. You will also notice like the 1st navigation tutorial we have set “LI CLASS CURRENT” which basically means the link on the navigation will stay in mouseover state for that certain page.

So you HTML code should look like this.

[sourcecode language=’html’]

 

[/sourcecode]

Thats all the HTML code we need, so now head over to your styles.css file. At the top of your css file add a comment code, which looks like this /* NAVIGATION ELEMENTS */ after that we start to add our navigation css rules.

[sourcecode language=’css’]
.navigation {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:40px;
background:#1841c8 url(navigation/nav_background.gif);
}
[/sourcecode]

padding:0 0 0 20px = A shorthand property for setting all of the padding properties in one declaration.
margin:0 = A shorthand property for setting the margin properties in one declaration.
list-style:none = removes the bullets from the list.
height:40px = height of our navigation bar.
background:#000000 url(navigation/nav_background.gif) = sets our naviagtion background color to black, and also sets the background of our navigation which refers to our image we created in photoshop.

Our next bit of css code is.

[sourcecode language=’css’]
.navigation li {
float:left;
}
.navigation li a {
display:block;
float:left;
height:40px;
line-height:40px;
color:#FFFFFF;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
font-size:11px;
}
.navigation li a b {
float:left;
display:block;
padding:0 16px 0 8px;
}
[/sourcecode]

float:left = The float property sets where an image or a text will appear in another element. In our case left.
display:block = The element will be displayed as a block-level element, with a line break before and after the element.
line-height:40px = The line-height property sets the distance between lines.
color:#FFFFFF = Color #ffffff is white.
text-decoration:none = Defines normal text.

The next bit of css defines our “current” class and “mouseover” image.

[sourcecode language=’css’]
.navigation li.current a {
color:#FFFFFF;
background:url(navigation/nav_hover.gif);
}
.navigation li a:hover {
color:#00CCFF;
background: url(navigation/nav_hover.gif);
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}
[/sourcecode]

Take note of the background: URL as the links relate to our mouse over image we created in photoshop. Also double check your image paths which is something i should of mentioned ealier, if you images dont show when we text in the browser then more than likely it will be the image path.

The last bit off css code is for our icons. Again dont for get to comment code /* ICON ELEMENTS */.

[sourcecode language=’css’]
/* ICON ELEMENTS */

.navigation li a em.home {
background-image: url(nav_icons/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(nav_icons/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(nav_icons/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(nav_icons/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(nav_icons/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(nav_icons/contact.png);
background-repeat: no-repeat;
background-position: center center;
}
[/sourcecode]

Were only setting 3 simple rules for each of our icons as most of the important stuff is inherited from the other CSS RULES. The most important again is our individual images or icons that we made previously. If you look at our HTML code in our links you will see each icon has its own individual class that relates to there own snippet of code in the css file.

To see the navigation bar live, click HERE

54 thoughts on “CSS Menu With Icons”

  1. Great Tutorial, but I’m having trouble over here on my end. I followed each step but for some reason when I view my index page in my web browser my icon and nav background images will not show.

  2. Hi great tut, I’m shit at working photoshop and i dont know where to find the icons u used. i looked in the brush library but no dice. how i find them?

    sorry for idiot question

  3. Nice tutorial for creating the menubar, can you please help me on creating dropdowns to those buttons.. or leading to any of tutorials which has icons and dropdown menu. Thanks

  4. the icons are found in the custom shapes libary its the icon underneath the “path selection tool”

    its bunched up with a few other things “rounded rectangle tool”

  5. a really Nice tutorial. thanx

    a.design: u have to connect the index file with the css file by adding:

    between head tags..

  6. I got a lil’ problem. Im trying to put this stuff in something different and trying to mix them, but hover isnt working. I see only the little image like behind the text. I tryed to change padding but it moves link then. So, what to do?

  7. I’m a bit confused when your slicing up the hover images, making each selection 300 pixels wide would be half the nav bar, they would not look like tutorial, is this a mistake? Great tutorial however, maybe I’m just confused.

    Thanks.

  8. 300 pixels aint the width of the actual button on the navbar, but if you have a long word like “website templates” for example, then 300pixels will be long enough for the text to fit.

  9. Ok figured out most but after doing some tweaks how does one align the hover image under the corresponding link. After resizing and modifying the glow is now a tad off, i’ve been messing with the padding but it only seems to shift the text and image buttons but not successful with moving the hover. Thanks

  10. Hi,

    Good tutorial. I just can’t get it work though. I’ve bought it and extracted all the files, so I know the coding’s right.

    When I try to view it, it doesn’t show any images.

  11. Just wanted to thank you for providing such a great tutorial. I’ve been banging my head trying to get out of the old school methods of tables and what not and really got a good handle on CSS just from this tutorial. From your tutorial I have so far created my first truly CSS website, some may think not a big deal but too me not relying on a tables for aligning everything has been a god send. I’m no expert but it looks pretty good and quite frankly surprised myself. I did manage to cheat the hover by slicing more to the left to give the illusion the glow is under each heading correctly, no one will be the wiser, wait a minute the cats out of the bag, as long as the boss doesn’t know, lol.

    Great write up.

  12. I’ve been experimenting with this tutorial just to help understand how everything works together but compatibility issues have stumped me. I’ve managed to center the menu on a fixed layout in Safari and Firefox with no problem but when its viewed in Internet Explorer its shifted to the left, how would you center float this menu system in IE?

  13. Thanks

    I hav a “but”

    It aint working, Even after just copying the whole “tut” I’ve double checked the image paths

  14. i get one icon (the faq icon) not showing up..
    the rest does show up
    i double checked the paths in it seems alright…
    also the icons are on the navigation hover (the grey stroke and the blue line)
    and the blue line stays on the forum icon (in your case home icon) , it doesnt go away

    ( o yeah i copied your whole css tutorial and changed it a bit to fit in my lay-out but i can use this lay-out on another site?)

  15. also the icons are on the navigation hover (the grey stroke and the blue line) <..<

    and the blue line stays on the forum icon (in your case home icon) , it doesnt go away <..<

Leave a Reply

Your email address will not be published. Required fields are marked *