Oct 29

Tagged in: CSS Comments:Add

Advanced CSS Menu

Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

View Demo CSS menu

Download Demo ZIP

Overview

Here are the required graphics to assembe the menu (you can download from the zip).

1. Main background

Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.

2. Button graphics

Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the "home" item, go to menu Edit > Copy Merged (Cmd + Shift + C).

Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Paste the "home" graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.

Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.

Repeat this step for the other buttons. You should have the follow graphics:

3. HTML source

When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>.

• note there is an id="menu" assigned to the<ul> tag
• an unique class name assigned to each link <a>
• an empty <span> tag (the purpose of this is to make the mouseover effect)

<ul id="menu">
  <li><a href="#" class="home">Home <span></span></a></li>
  <li><a href="#" class="about">About <span></span></a></li>
  <li><a href="#" class="rss">RSS <span></span></a></li>
</ul>

#menu

Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}

#menu span

Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.

#menu span {
  display: none;
  position: absolute;
}

#menu a

The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.

#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}

#menu a:hover

When mouseover the link, we want to shift the background image from top to bottom.

#menu a:hover {
  background-position: left bottom;
}

#menu a:hover span

When mouseover the link, we want the span element to display:block.

#menu a:hover span {
  display: block;
}

#menu .home

Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}

#menu .home span

Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)

#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about

Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss

Repeat this step for .rss

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}

All in one:

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}

Done

That’s it. You can preview my CSS menu.

Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.

Delicious Stumbleupon Digg

Design Watercolor Effect Menu Review: PayPal Redesign

Comments

Pages: 20 19 18 17 16 15 14 13 12 11 10 … 1 » Show All

There are 199 comments (+Add)

• 199 jacob http://j12media.com
  May 7th, 2008 at 10:52 pm

  what does it do in IE6? could they be fixed with a simple _hack?

• 198 Dharam Mali http://malidharam@wetpaint.com
  May 6th, 2008 at 7:15 am

  Nice layout, Good Css, Nice design,

  & Good work.

• 197 website design http://ooyes.net
  May 5th, 2008 at 4:12 am

  Really nice site, of course goes to my bookmark list.

  U should buy a licensed photoshop copy, but if you want 2 download, search about “torrentz” and read about them

• 196 smitholi http://www.smitholi.com/css-templates
  May 3rd, 2008 at 6:24 pm

  wow, I’ve been searching for this for about 30 min’s this seems to be the only place to find this tutorial. Awesome stuff, Thank you!

• 195 Nick
  May 1st, 2008 at 3:53 pm

  great script!!… but it dont work with ie6 the nav pushes down the images bottom..

• 194 BMD-Media.com http://www.bmd-media.com
  May 1st, 2008 at 1:20 am

  WOW! This will definitely come in handy. Great Article

• 193 Real Estate Graphic Design and Marketing http://www.youplusbuild.com/
  April 30th, 2008 at 12:54 pm

  I’d also love the IE6 hover javascript fix. Otherwise I’ve applied your instructions with success at http://www.youplusbuild.com/
  Thanks!

• 192 DonSailieri
  April 25th, 2008 at 9:52 am

  Good stuff but unfourtunately it´s got some nasty bugs in IE6 =(

• 191 Anna
  April 22nd, 2008 at 10:02 pm

  Thank you for such a wonderful tutorial. I have been looking for a way to code this. Sweet !

• 190 Martin http://aeonbeat.com
  April 22nd, 2008 at 6:51 am

  thank you, again

Pages: 20 19 18 17 16 15 14 13 12 11 10 … 1 » Show All

Post Your Comments

Name (required)

Mail (required)

Website

Comment Guidelines

• Please keep comments related to topic. And be nice, don't spam!
• Basic HTML tags are allowed:
  <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
• Note: un-related or spam comments will be deleted.

Live Comment Preview