Professional Documents
Culture Documents
Search…
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Subscribe and 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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Save the graphic for the web, using a PNG file type to keep the graphics crisp and
filesize low.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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
54 11 3 4
Tw eet 55 Like
0
Share
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Join the mailing list to have new content delivered straight to your email inbox.
Every subscriber gets a free pack of realistic web shadows.
findings on Twitter.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
How To Code a Blog Theme Concept in HTML & CSS
69 Comments
Marco June 8, 2009 at 9:33 am
Thanks Marco
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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 :-)
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
sonichtml June 8, 2009 at 10:02 am
Isnt it a problem?
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
text was stuffed full of keywords that that’s when there could be
trouble.
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Mikey June 9, 2009 at 11:07 pm
ok
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Sindustries 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!
If your really looking for a challenge you could keep the link text and
use sliding doors while using CSS sprite’s ;) have fun.
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Jon 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!
Nice Chis :)
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
you’re using?
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Bryan 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….
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
http://www.lucidmotives.com/blog/2008/09/06/create-a-navigation-
bar-with-rollover-effects-using-graphics-and-css/
been around your website. first visit for me but probably not the
last.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
thanks for sharing all this.
Well done!
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
michel June 12, 2009 at 5:22 pm
thanks!!!!
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
At least none of the fixes I tried to use. They all screw up
background position.
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
karfes' 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.
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.
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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
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
hi i am max chuahan
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
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..
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Andy July 28, 2009 at 3:19 am
Nice tut!
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/
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
much appreciated!
Thank you!
Nice tutorial
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?
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Mike
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. :-)
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Good Tips. Thank you so much
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
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.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Harsha M V December 6, 2009 at 8:06 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
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
About Line25 Most popular posts
Line25 was built in March 2009 by Chris Spooner, a designer How To Design a Custom YouTube Background
with a passion for all things creative. Line25 aims to provide web Rounding Up the Top 10 jQuery Lightbox Scripts
design ideas and inspiration through articles, tutorials and How To Create a Pure CSS Dropdown Menu
examples of stunning site designs. Keep up to date by 15 Tutorials To Help You Build WordPress Themes
subscribing by RSS, Email, or join Line25 on Twitter. Create a Stylish Contact Form with HTML5 & CSS3
Copyright © Chris Spooner. All rights reserved Privacy policy Advertise on Line25 64467 Subscribers Page loaded in 0.497 seconds
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com