How to Create a CSS Menu Using Image Sprites
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!
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.
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.
thanks for sharing…..its jst awesome
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.
Nice post and thanks for sharing your knowledge with us.
yayy
AWESOME TUT! how would you make this menu verticle?
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!!!