Line25

How to Create a CSS Menu Using Image Sprites

Read the full post

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

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.

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.

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 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.

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.

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.

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.

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.

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

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.

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.

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.

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 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.

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.

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

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

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.

  • http://www.marcofolio.net/ 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 ;) !

    • http://line25.com Chris Spooner

      Thanks Marco

      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 :-)

    • http://www.earthchronicle.com Wayne

      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.

      • asdasas

        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

  • http://www.sonichtml.com/en/ sonichtml

    Nice~ thank you for shared.

  • Dave

    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?

    • http://line25.com Chris Spooner

      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 text was stuffed full of keywords that that’s when there could be trouble.

      • Dave

        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.

        • Dave

          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?

        • Mike

          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.

    • http://www.thatwebguyblog.com Mikey

      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?

  • http://www.cooltricksntips.com Rahul Jadhav

    Nice tutorial. Just stumbled it

    • manoj

      ok

  • http://www.webmasterdubai.com webmasterdubai

    really nice tutorial good way to use sprites.

  • http://www.sindustries.co.uk Sindustries

    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.

  • http://dsdizajn.com Davor

    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

  • http://www.sunshine-design.co.uk Jon

    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!

  • http://www.akkis.gr akkis

    Nice Chis :)

  • http://www.shahin.co.nr Shahin – Rolam Shahin Designs

    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 you’re using?

  • http://www.bloodbone.ws Brendan

    It’s also handy to supply the ul#awesome-menu with the background to prevent flicker in older browsers; IE6 etc.

  • http://echolibre.com David Coallier

    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.

    • Mike

      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.

  • http://www.webcertain.com Bryan

    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….

  • Will

    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.

  • http://www.lucidmotives.com/blog/ Erik Ford

    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: http://www.lucidmotives.com/blog/2008/09/06/create-a-navigation-bar-with-rollover-effects-using-graphics-and-css/

  • Jack F

    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.

  • http://www.mikelewek.com Mike Lewek

    Very Awesome Tutorial Chris.

  • http://www.them.pro web design beijing

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

    been around your website. first visit for me but probably not the last.
    thanks for sharing all this.

  • http://myfacefriends.com Myfacefriends

    this is awesome tutorial… nice one Chris.

  • Ray M.

    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.

  • http://www.dumex.com.sg/pregnancy Jane

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

  • michel

    thanks!!!!

  • http://www.teresechristiansen.com Terese

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

  • name

    menu flickers on rollover (firefox).

  • http://www.dsdizajn.com Davor

    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.

    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.

  • http://www.conradbugeja.com Conrad

    What about the menu compatibility in IE 7?

  • http://novatvmedia.com Ezrad Lionel

    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.

  • karfes’

    i like the tut coz it shows how to use photoshop very well. i completely needed the css n u got it all. thanx.

  • http://www.iwantiphone.co.uk Matt

    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.

  • http://www.shamsgroup.com naveena

    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

  • http://www.cherryredpictures.com Mark Weir

    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

  • http://www.cherryredpictures.com Mark Weir

    Ah alas it was my own fault, somehow forgot to add
    ul#nav li {
    display: inline;
    }

  • http://www.espreson.com/ espreson

    Regarding Hover effect:
    Hover color is looking odd…
    Underscore or underline or border-bottom will be better…

  • hecbuma

    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?

  • http://www.magicandy28.com Andy

    Thanks a lot, these tutorials are really helpful!

  • http://www.spiffmedia.com Lele

    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
    :-)

  • http://theprodigyportal.2kmegs.com theprodigyportal

    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.

  • http://www.bestpsdtohtml.com/ Andrew Jhonson

    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/

  • ivo

    Great tutorial, thanks!

  • http://www.alavri.com James

    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!

    much appreciated!

  • Ben

    Very nice tutorial, clean and cutting edge.

    Thank you!

  • sushil shirbhate

    Nice tutorial

  • Mike Heath

    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?

    Mike

  • http://www.paitadesign.com/ Giacomo

    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. :-)

  • http://www.puppetbrain.com Totoro

    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.

  • http://www.thedindigulonline.com Elijah

    Good Tips. Thank you so much

  • http://darbezweb.atspace.com darbez

    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

  • http://www.paulogoode.com paulo

    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.

  • http://variable3.com Harsha M V

    great post. nice way of doing it.

  • Energie

    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.

  • http://squareart.co.za/lab squareart

    Great tutorial, really love the possibilities this technique has. BUT I’m also having a problem in IE – shifting the menu down a bit.

    Chris if you could supply the “fix” for this that would be much appreciated. As such it leaves the menu unusable if you are considering IE users.

    Got to Love IE: )
    Thanks mate.

  • http://www.selog.in Rohit

    thanks for sharing…..its jst awesome

  • Energie

    For my first post:

    IE6 fix: change display:block; to display:inline; from -li a- element.

    Working great this way. Thank you for tutorial again.

  • http://shahriat.com Shahriat Hossain

    Nice post and thanks for sharing your knowledge with us.

  • nick

    yayy

  • jp

    AWESOME TUT! how would you make this menu verticle?

  • Junaid

    Hi,,it’s very cool but it has some issue….when i click on any button it shows active button but when i click on anywhere on the screen the active effect gone…please help me!!!