Line25

Create a Dark Navigation Menu Design with CSS

Read the full post

Follow this step by step guide to create a dark and sleek navigation menu design. We’ll begin by building the visual concept in Photoshop, export the image files, then build up the final menu in HTML and CSS using a range of declarations to replicate the design and layout in code.

View the dark menu design demo

View the dark menu design demo

The PSD Concept

Open up Photoshop and create a new document with a black background. Use the handy pixel swatches I posted a few weeks back to fill a new layer with a cool pattern. Press CMD+I to invert the colours, then set the blending mode to Screen at 10% opacity.

Use the Rounded Rectangle tool with 50px corner radius to draw the basic shape of the menu bar. This large corner radius will help create a long ‘pill’ shape.

Double click the shape’s layer to add some Layer Styles. Begin with a Gradient Overlay flowing vertically between two dark grey colour samples.

Give the menu a subtle three dimensional highlight using the Inner Shadow feature. Set the mode to Normal, colour to a mid-grey, distance to 2, choke to 30% and size to 5px.

Draw the first menu item using the Rounded Rectangle tool on a new layer. Nudge the shape into position using the cursor keys.

Open up the layer style settings for the menu item and add another Gradient Overlay. Select slightly lighter grey colour samples.

Add an Outer Glow effect but change the settings to Normal, a dark grey colour, 50% spread and 5px size.

Finally add a 1px Stroke effect using an almost black colour sample. This stroke effect combined with the outer glow gives a cool chamfered effect around the button.

Use the Text tool to type out the relevant words on each of the buttons. Set the font to Helvetica Bold with a near white fill.

Open up the layer style window for this text layer and select Drop Shadow. Change the angle to -90 degrees and alter the settings to 1px distance and 100% spread to create a subtle inner shadow. We could have used the Inner Shadow effect, but this would add the effect inside the text which would affect its legibility. A Drop Shadow adds the effect on the outside, leaving the original text intact.

Duplicate the menu item to create the remaining buttons on the menu and space out each item evenly.

Next we need to design a style for the button’s pressed state. Open up the settings for one of the button and alter the gradient angle to -90 degrees. Slightly darken the colours to give the impression of shade.

Draw a square selection over the background pattern, taking into consideration key points in the pattern to allow the image to repeat. Export this as a PNG image.

Toggle off all the other layers and draw a selection around the menu background, press CMD+Shift+C and paste into a new document. Export this file as a PNG-24 graphic with transparency.

Make selections of the button states and paste them into a new document to form a little sprite graphic. Export this file as a PNG-24 image.

The HTML Markup

View larger scale image

In order to build the menu as a fully working web page we need to write out a little HTML code. Begin with a document with a basic structure of Doctype, Title and CSS stylesheet link, then add a <ul> with an ID of menu. Write out <li> elements with anchors for each menu item.

The CSS Styling

View larger scale image

The menu really comes to life when we add the CSS styling. Begin with a simple reset to remove any browser defaults, then add some styling to the body, here I’ve added the repeating pattern background image for the sake of the demo.
Next, target the unordered list with ID of menu and give it a specific width and height according to the size of the menu background image. Add a touch of padding to move the buttons into place and minus this figure from the height to maintain correct box model calculations.

View larger scale image

We can then target the child list and anchor elements to style each individual button. list-style: none; and float: left; removes the default bullet points and floats the list items side by side. The actual button styling is added to the anchors. display: block; is first added to change the anchor element from inline to block, which then allows for an exact width and height to be added. Add the button image as a background and style up the text as 18px bold Helvetica. The inner shadow effect can be created using the CSS3 text-shadow property, then the actual font colour and alignment will finish it off to match the concept.

View larger scale image

Now the default button state is in place, we need to add the different effects when the button is hovered and pressed. The CSS pseudo selectors do this job. Set up a new declaration using the :hover selector and adjust the colour to the near white selection from the concept. The :active selector can then be used to style up the button when it’s pressed by the user, alter the background image position to bottom so it displays the inset effect.
If you test the button in a browser you’ll notice an ugly dotted outline ruining the effect. a { outline: none; }; will correct this, but don’t forget to add a backup :focus declaration to provide visual feedback when the user has keyboard focus on that particular element.

The Final Menu Design

That makes our dark and sleek menu design complete. Here’s the full HTML and CSS:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dark sleek menu design</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #000 url(images/bg.png);
	padding: 200px 0;
}

#menu {
	width: 612px; height: 73px; padding: 16px 0 0 0; margin: 0 auto;
	background: url(images/menu-bg.png);
}

	#menu li {
		list-style: none; float: left; margin: 0 12px;
	}
		#menu li:first-child {
			margin-left: 19px;
		}
	
	#menu li a {
		display: block; width: 176px; height: 37px; padding: 20px 0 0 0;
		background: url(images/btn.png) top no-repeat;
		font: bold 18px Helvetica, Arial, Sans-serif; text-shadow: 0 -1px #1d1d1d;
		color: #767676; text-align: center; text-decoration: none;
	}
		#menu li a:hover, #menu li a:focus {
			color: #dcdcdc;
		}
		#menu li a:active {
			background: url(images/btn.png) bottom no-repeat;
			color: #767676;
		}
		
a { outline: none; }

View the dark menu design demo

View the dark menu design

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.

18 Comments

  1. Very Cool. I really enjoyed the level of detail. Clean and very smooth looking.

  2. Would be a tad nicer if it had a scroll over image or was in css3, regardless nice tut!

  3. Nice tutorial! Looks good.

  4. Great tutorial, would be great to see a navigation that grows though dependent on the wording you add to the navigation item – as you have fixed width items for everything in this tutorial. This is relatively simple to achieve by adding an inline span and some more CSS. Alternatively if the navigation is dynamic you can insert the spans with jQuery on page load.

  5. Alex Hall says:

    Nice looking menu that! I had a go at making it in purely CSS(3). It's not perfect, but it's certainly a step towards your design:

    http://www.devseo.co.uk/examples/css3-slick-dark-menu/

  6. designbyarm says:

    Great shares. Thanks you

  7. Ahmed Abbouh says:

    great tutorial thank you!

  8. Nice tutorial, I really like the way you mark up the HTML and CSS with your comments, it's really easy to follow. Thanks for sharing.

  9. Thank you for sharing. This was really cool.

  10. hamburger says:

    Helpful tutorial.
    It would be great if you also provide the PSD-file

  11. Paul Randall says:

    I'd really like to see tutorials like this using CSS3.

    There are many downsides to using graphics, especially when they aren't even stretchable.

    In fact, examples using technologies like CSS3 will be a lot more relevant in 6 months+ as there are more adopters of the technology.

  12. Nerobianco says:

    I've been spending too much time on your website(s) these days, which means i'm learning more and more, getting the chance to practice myself with your beam!
    Cheers mate, please keep it going.

  13. Thanks very much for this tutorial :)

    I'm always amazed at the level of detail you put into what, at first glance, appears very simple to put together.

  14. Hi , You have Very Nice Resource Collection , I hope in future also You Will Add up Some Extra Collections.I am Really Thanks For Such a Collection.

    Thanks & Best Reagrds. http://www.websitedesigninginstitute.in

    Sanjeev Kumar

  15. Hi , You have Very Nice Resource Collection , I hope in future also You Will Add up Some Extra Collections.I am Really Thanks For Such a Collection.
    Thanks & Best Reagrds. http://www.websitedesigninginstitute.in
    Sanjeev Kumar

  16. NoeG says:

    wow now this is a high quality tut, exactly what I needed. thanks a bunch!

  17. Sony says:

    Nice tutorial! Looks good.

Sorry, comments are now closed