pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Articles Inspiration Tutorials About Archives Contact

Search…

How to Create a CSS Menu Using Image Sprites

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Follow these steps to build your own modern navigation bar design, starting with the

initial steps in Photoshop to flesh out the design, then moving on to constructing the

HTML and styling with the CSS image sprite technique. However, if all that sounds too

strenuous, there’s also a handy download of the source files especially for you!

View Demo

Download

Enter your email address

Subscribe for email updates

Don't miss a post! Sign up for monthly digests of the

top content from Line25. Every subscriber gets a

free handy pack of web shadows.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Start work in Adobe Photoshop and create a new document at your desired size. Grab

the Rounded Rectangle shape tool and draw a long, thin bar onto the canvas on its own

layer.

Subscribe and Download

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Double click the layer to open the layer style options. Add a Gradient Overlay spanning

from a dark to light tone.

Head down to the Stroke options and add a thin outline stroke with a mid grey colour.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

The bar so far has a soft bevelled appearance, and is ready for being filled with menu

options.

Use the Text Tool to type out a range of menu options. Being the Menu of

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Awesomeness, I’m selecting a bunch of awesome things from everyday life… Ninjas,

Zombies, Robots etc.

Double click the text layer, then add a darker Gradient Overlay.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Also select a subtle Drop Shadow using the Normal blending mode, a light grey swatch

and just 1px in the Distance box.

These little tweaks to the text give a nice chiselled effect to the menu design, simulating

the subtle casts of light and shadow.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

On a new layer, use the Mask Tool to draw a 1px line. Fill the selection with a colour

pick from the lower portion of the menu, then nudge the selection to the side and fill with

a lighter shade. Duplicate this chiselled line between all menu items.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Group all the layers of the menu together, then make a copy. Rename the duplicate to

indicate that it contains the hover effects.

Head into the layer styles of each layer in the Hover group and adjust the gradients to

appear slightly darker.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

The darker version of the menu will display when an item is hovered by the user’s

mouse.

Stack the groups vertically so that one menu is sat above the other, then crop down the

canvas to the exact dimensions of the graphics.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Save the graphic for the web, using a PNG file type to keep the graphics crisp and

filesize low.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Open up a code editor and flesh out the basic HTML. Being a list of options the menu is

suited to the Unordered List tag. Create a link within each list item corresponding to the

original concept.

We’ll also need a way to target each link individually, so add a class to each anchor

element.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Create a new CSS file and begin with a quick reset to remove the default styling. We

can then start to target the anchors within the lists. All the anchors will need transforming

into a block element, they are all 56px tall (half the image size), all require the

background sprite image and a text-indent to shift out the original text. These styling

rules can all be crammed into the generic styling of the basic anchor, we can then get

specific by targeting each class with individual styles.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

With the general anchor styling and the first menu item given its specific width and

background position coordinates the menu starts to shape up.

Each of the remaining list items can be given its unique styling, taking the background

position coordinates by measuring from the top left corner. This essentially displays the

correct section of the large image while the rest is hidden from view.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

With all the items styled up, the menu is looking as planned, recreating the original

concept with HTML and CSS coding.

The menu still needs styling to produce the hover effects, list out a set of new styles but

this time, set the background-position to -56px so that the lower half of the image is

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

this time, set the background-position to -56px so that the lower half of the image is

shown.

A quick test in the browser shows the effect come to life. When a specific menu item is

hovered over, the background image is shifted to display the darker version of the

menu.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

A common visual problem with some browsers is that the accessibility features that

allow keyboard navigation don’t quite look as intended when a button is clicked. As you

can see, a horrible dotted line is left right across the page.

This can be removed in the CSS, but don’t stop there! If this visual cue is removed it is

a major accessibility flaw unless an alternative is supplied. We can reproduce our own

visual cue using the :focus selector.

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Tweet 55

54

Like

11 40

Check out the working demo of the menu, or feel free to download the source code to

pull it apart and see how it all works.

View Demo

Download

3

Share

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Enter your email address Subscribe

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web

design techniques collating creative website designs. Check out Chris'

design tutorials and articles at Blog.SpoonGraphics or follow his daily

findings on Twitter.

Join the mailing list to have new content delivered straight to your email inbox.

Every subscriber gets a free pack of realistic web shadows.

More posts like this

How To Create a Cool Animated Menu with jQuery

Create a Clean Modern Website Design in Photoshop

Create a TV Screen 404 Page with Clever CSS Tricks

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 8, 2009 at 9:33 am

June 8, 2009 at 11:06 am

Thanks Marco

Just sharing my 2 cents here Chris.

Seriously, don’t learn others to do this:

[b]* { margin:0; padding:0; }[/b]

Although it’s good for “simple” examples like this one, some

default elements (form / legend etc.) do need their default margin &

padding to give the desired effect.

Also, the menu “corners” should be transparant, because in your

example you still see the white background.

Otherwise, a very useful tut showing almost the Apple.com menu ;)

!

How To Code a Blog Theme Concept in HTML & CSS

CSS Basics: How to Design & Code a Stylish Button

Create a Stylish Contact Form with HTML5 & CSS3

69 Comments

Marco

Chris Spooner

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Good point on the * reset. I do usually write ‘quick and dirty reset’

in the comment which identifies a not-so-clever method, but

obviously didn’t in this example.

I knew someone would spot the corners! haha. It was originally built

as a one off, then decided to create the whole demo as an after-

thought :-)

July 1, 2009 at 6:02 am

October 25, 2009 at 6:24 am

Hi, disagree about the * reset. forms / legends and many other

elements may have defaults, but they are not consistent between

browsers. A * reset was lesson one when I was taught cross-

browser compatibile CSS. That means that… yes… you have to

reapply all the margins and padding, but at least yo

I disagree about the * reset. forms / legends and many other

elements may have defaults, but they are not consistent between

browsers. A * reset was lesson one when I was taught cross-

browser compatibile CSS. That means that… yes… you have to

reapply all the margins and padding, but at least you know that it’s

actually going where you want it.

Wayne

asdasas

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 8, 2009 at 10:02 am

Nice~ thank you for shared.

June 8, 2009 at 10:32 am

June 8, 2009 at 11:08 am

It’s a common debate but the use of hidden elements is fine when

used in this sense where it isn’t adding any extra value to the page.

It’s simply replacing the text word-for-word, whereas if the hidden

Hi! Sry my english is not so good :(

Whats about the probelm with

hidden text and links with Google SEO! You use a text-indent -

9999.

Please look at:

http://www.google.com/support/webmasters/bin/answer.py?

answer=66353

Isnt it a problem?

sonichtml

Dave

Chris Spooner

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 8, 2009 at 11:31 am

June 8, 2009 at 11:35 am

sry…. a fault in my last message. I mean:

…But can google make a different between a word-for-word “list

Element text-indent” and a ”p or h2 text-indent” with full of

keywords?

June 9, 2009 at 1:51 pm

Google can’t tell what the content of the picture is, but surely they

can differentiate between a text-indent affecting one word and a

text-indent used for stuffing several words.

Hmm. But can google make a different between a word-for-word

“list Element text-indent” and a ” or text-indent” with full of

keywords? (Hope you understand what i mean). Google cant read

the text from the “picture” and compare it with the “text”. I have read

a lot about “small” homepages (not big like apple for example) …

that they have trouble with google. So iam a bit afraid of this

technique.

text was stuffed full of keywords that that’s when there could be

trouble.

Dave

Dave

Mike

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 9, 2009 at 11:07 pm

Correct me if I’m wrong, but I thought text-indent -9999 only harmed

SEO when you use in-line styles. Do Google’s bots really go and

examine our external CSS files?

June 8, 2009 at 10:36 am

July 11, 2009 at 6:02 am

ok

Nice tutorial. Just stumbled it

June 8, 2009 at 10:38 am

really nice tutorial good way to use sprites.

Mikey

Rahul Jadhav

manoj

webmasterdubai

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 8, 2009 at 11:30 am

The awesome thing is if you use a CSS sprite sheet the user only

need to load one image!

A good thing to do would be to included all your sites navigation

backgrounds and icons on the one sheet and position them using

css so instead of loading 10-20 images you can decrease this

amount to … well one.

If your really looking for a challenge you could keep the link text and

use sliding doors while using CSS sprite’s ;) have fun.

Great tut Chris.

June 8, 2009 at 12:46 pm

Hi Chris!

Tut is awesome and simple as always. Thinking of using sprites for

my next project. The menu is awesome but the “download button”

and the header text on this demo page is pure awesomeness! :D

Tnx

Sindustries

Davor

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 8, 2009 at 2:50 pm

Great tutorial for those who are just starting out using CSS.

Everyone should be using this technique by now! Great tip for

replacing the outline too, I really hate outlines!

June 8, 2009 at 3:58 pm

Nice Chis :)

June 9, 2009 at 8:06 am

Nice tutorial Chris. Using sprites is THE best idea when you don’t

want to use text hyperlinks in the menu. I also used sprites on my

site to create the menu and jQuery to add a smooth animation

effect. I think the best result pops up when you combine sprites

with jQuery.

P.S. Could you please let us/me know which jQuery tooltip plugin

Jon

akkis

Shahin - Rolam Shahin Designs

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

you’re using?

June 9, 2009 at 9:26 am

It’s also handy to supply the ul#awesome-menu with the

background to prevent flicker in older browsers; IE6 etc.

June 9, 2009 at 11:25 am

June 9, 2009 at 1:55 pm

Add more sprites to the right side of the original image and add

another few lines of HTML and CSS. It’s not exactly rocketscience

to identify and continue an established pattern.

I think this is completely wrong. It removes all possibilities of

adding new menu elements. It’s great for a design company

because the developers integrating the HTML will have to come

back to them if they want a new menu item.

Brendan

David Coallier

Mike

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 9, 2009 at 5:09 pm

Still using Adobe photoshop for web work.. Leave it for the people

who work with paper, Its so slow and cumbersome that even

adobe does not recomend its use for web building….

June 9, 2009 at 5:32 pm

Seems to me the sprite should probably be a transparent png — if

you’re using rounded corners as you are in this example. The

demo has little white bits in the corners that makes an otherwise

nice looking menu look a bit unfinished.

June 9, 2009 at 5:39 pm

Depending on the site I am developing, I either use this method or I

use individual sprites for each list item. I find the longer the

navigation system will be, the more I will use the latter as opposed

to the former. Not certain if you allow links in your comments, but

here is a down and dirty tut I wrote showing the latter:

Bryan

Will

Erik Ford

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

http://www.lucidmotives.com/blog/2008/09/06/create-a-navigation-

bar-with-rollover-effects-using-graphics-and-css/

June 9, 2009 at 6:03 pm

Would it be best instead of giving each link a class of say “ninja”,

to give them an ID? as you probably wont give another element

that same class? Other then that, nice tutorial.

June 9, 2009 at 10:35 pm

Very Awesome Tutorial Chris.

June 10, 2009 at 4:59 am

i am certainly gonna try this. that looks really “awsome” ;o)

been around your website. first visit for me but probably not the

last.

Jack F

Mike Lewek

web design beijing

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

thanks for sharing all this.

June 10, 2009 at 6:00 am

this is awesome tutorial… nice one Chris.

June 10, 2009 at 3:17 pm

Well done!

This is a good case of where CSS3′s background-position-y

would come in handy: For the hover states, we wouldn’t need to

repeat the horizontal background positions.

June 11, 2009 at 8:29 am

excellent job! i don’t know if i do mine and if it would come out as

good as sample!!

Myfacefriends

Ray M.

Jane

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

June 12, 2009 at 5:22 pm

thanks!!!!

June 15, 2009 at 5:11 pm

Great tutorial!! Learned a thing or two I didn’t know before.

June 16, 2009 at 12:34 pm

menu flickers on rollover (firefox).

June 23, 2009 at 10:48 pm

The corners are not transparent for simple reason that in IE6 this

requires the PNG fix to be applied and this menu doesn’t work with

PNG fix active in IE6.

michel

Terese

name

Davor

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

At least none of the fixes I tried to use. They all screw up

background position.

This could of been mentioned somewhere in the tut so that I don’t

waste entire day building a web that doesn’t work in IE6.

Nice tut anyway.

June 30, 2009 at 9:13 am

What about the menu compatibility in IE 7?

June 30, 2009 at 9:45 pm

I really love it when people completely miss the point and offer their

2 cents. Try to understand the scope of an article before offering

suggestions, your mild retardation may be infectious.

Conrad

Ezrad Lionel

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

July 1, 2009 at 11:54 am

i like the tut coz it shows how to use photoshop very well. i

completely needed the css n u got it all. thanx.

July 9, 2009 at 10:35 pm

Fabulousa.

Great tute Chris, one I’ve been meaning to try but never got the

headspace to do it. I’ve been a little adverse to using images in my

menus but have decided that if it’s good enough for Apple it’s

good enough for me.

July 15, 2009 at 5:03 am

July 16, 2009 at 9:33 pm

Hello,

If I like to add a drop down then, how I’m suppose to do in this

following the same style.

please help me

karfes'

Matt

naveena

indie_preneur

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

August 13, 2009 at 10:17 am

hi i am max chuahan

naveena – I was looking for this a while back as well and finally

found this – http://www.cssgirl.com/examples/css-sprites-son-of-

suckerfish-dropdown.html

Had to tweak it some for more dropdowns, but should be what

you’re looking for.

July 23, 2009 at 4:08 pm

Love the tutorial, but I’m having an issue with it in IE6 I can’t get the

nav fixed at all.

Can anyone help? http://www.cherryredpictures.com/test

Thank you so much

July 24, 2009 at 12:17 am

Ah alas it was my own fault, somehow forgot to add

manoj

Mark Weir

Mark Weir

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

ul#nav li {

display: inline;

}

July 25, 2009 at 3:59 am

Regarding Hover effect:

Hover color is looking odd…

Underscore or underline or border-bottom will be better…

July 27, 2009 at 8:43 pm

hi.. I few months I’ve learned this technique… rollover works fine,

everything but still I had one little problem.. when a element its

clicking a selection lines appears a cross the windows.. you can

see it here http://www.ucol.mx on the center dropdown menu and

on the right one..

can u help me to avoid this?

espreson

hecbuma

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

July 28, 2009 at 3:19 am

Thanks a lot, these tutorials are really helpful!

August 4, 2009 at 3:41 am

Nice tut!

I use a similar technique to do my navigation but was wondering

how this style of nav could be applied to a drop down list ?

Any help would be hugely appreciated!

Thanks heaps

:-)

August 24, 2009 at 11:46 am

Nice tutorial.I have one question though..I am working for a project,I

am trying to make an image a background so i can put another

banner in top of it.Can you please help me?I have put my email

address on the comments.If you dont mind please reply.Thanks.

Andy

Lele

theprodigyportal

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

September 2, 2009 at 7:50 am

This is indeed a great article. CSS always plays a vital role in web

design and it always gives you opportunity to make your website

Google friendly. I have compiled few factors ‘why Google loves

CSS’ that you can check at http://www.bestpsdtohtml.com/get-to-

know-why-css-is-good-for-google/

September 2, 2009 at 10:20 pm

Great tutorial, thanks!

September 5, 2009 at 11:59 am

Thank you for this tutorial, it was a big help.

It was simple and easy to understand, and taught me how to make

a very cool menu!

Andrew Jhonson

ivo

James

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

much appreciated!

September 22, 2009 at 8:21 pm

Very nice tutorial, clean and cutting edge.

Thank you!

September 29, 2009 at 3:13 pm

Nice tutorial

October 11, 2009 at 7:21 pm

Great but would be much cooler still if the menu 1. had dropdown

submenus

and 2. achieved smooth rollover with jquery.

Any chance of a supplementary tutorial showing how to do that?

Ben

sushil shirbhate

Mike Heath

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Mike

October 19, 2009 at 3:10 pm

Nice post, but….I notice a mistake in your article! IE6 don’t support

“hover on Non-Anchor Elements”! Have a lokk here:

http://www.smashingmagazine.com/2009/10/14/css-differences-

in-internet-explorer-6-7-and-8/ . Just put the IDs in the “li” tag, and

rewrite the css just a little, and it would work great. :-)

November 7, 2009 at 5:01 pm

Nice tutorial, but there are some bugs in it.

The active state doesn’t work in IE7 and in Firefox when the active

state is highlighted and you click anywhere on the screen the

highlight disappears.

November 10, 2009 at 6:13 am

Giacomo

Totoro

Elijah

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Good Tips. Thank you so much

November 11, 2009 at 7:00 am

Thanks for sharing a such a wonderfull TUTS and hope I will visit u

r tutorial again and agian

KEEP IT UP MAN

(e

__;)

(i

December 6, 2009 at 6:26 pm

Thank you Chris, I’ve just followed each step and then

implemented it into the footer of my website and…. it worked first

time :) Can’t believe it, thank you for the excellent tutorial.

darbez

paulo

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

December 6, 2009 at 8:06 pm

great post. nice way of doing it.

January 17, 2010 at 8:28 pm

Hello Chris,

Thank you for great tutorial. If you don’t mind i need little help. I’ve

tried something to fix it but i could’nt success. I would like to know

how can i fix a problem with IE6. The problem is when you mouse

over to menu its pushing other div to down. Thank you for helping.

Newer comments

Harsha M V

Energie

Comments are now closed

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Copyright © Chris Spooner. All rights reserved Privacy policy Advertise on Line25 64467 Subscribers Page loaded in 0.497 seconds

About Line25

Line25 was built in March 2009 by Chris Spooner, a designer

with a passion for all things creative. Line25 aims to provide web

design ideas and inspiration through articles, tutorials and

examples of stunning site designs. Keep up to date by

subscribing by RSS, Email, or join Line25 on Twitter.

Most popular posts

How To Design a Custom YouTube Background

Rounding Up the Top 10 jQuery Lightbox Scripts

How To Create a Pure CSS Dropdown Menu

15 Tutorials To Help You Build WordPress Themes

Create a Stylish Contact Form with HTML5 & CSS3