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

required graphics

1. Main background

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

screen 2

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

screen 3

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.

screen 4

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.

screen 5

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

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

613 Comments

1 28 29 30
  1. Teddy
    Apr 17, 2012 @ 4:39 am

    Another cool tutorial..thank you so much..

    Reply

  2. Shingo
    Apr 22, 2012 @ 7:32 pm

    Your demo is a piece of art, very beautiful. Thanks for this.

    Reply

  3. yemek tarifleri
    May 2, 2012 @ 12:05 pm

    Painting on the tablet is fun, but to do cool things need work.

    Reply

  4. Fact Stash
    May 26, 2012 @ 1:47 am

    You know what? I will definitely use this for my site! it’s the coolest nav bar I’ve seen and I am serious!

    Thanks!!! :)

    Reply

  5. Lenore Pelyo
    Jun 23, 2012 @ 5:11 am

    I have been surfing online more than three hours as of late, yet I by no means found any interesting article like yours. It is lovely value enough for me. In my view, if all website owners and bloggers made excellent content as you probably did, the internet might be a lot more helpful than ever before.

    Reply

  6. hridesh
    Jul 11, 2012 @ 11:56 pm

    script is not useful for professional work.. it is just a bring bad name for css…… so dont upload these types of scripts….

    Reply

    • Digital Mercenary
      Oct 8, 2012 @ 3:31 am

      What in god’s name are you trying to say? Your comment makes no sense whatsoever…
      “upload scripts”, “bad name for css”???
      “not useful for professional work”? Que?

      Reply

  7. Laboratory
    Aug 14, 2012 @ 6:51 am

    We are using one of the above menu for the health of our website, thanks for bundle of choices for our websites.

    Reply

  8. Alquiler yates Ibiza
    Aug 14, 2012 @ 2:42 pm

    I will definitely use this for my site! it’s the coolest nav bar I’ve seen and I am serious!

    Reply

  9. sreehari
    Aug 22, 2012 @ 5:01 am

    bigner

    Reply

  10. sreehari
    Aug 22, 2012 @ 5:03 am

    i am bigner in css and jquery
    it is more helpful …. i learn lot of
    thank you

    Reply

  11. hoasabi
    Aug 23, 2012 @ 12:49 pm

    Hi! This is a great tutorial but how do you make an Active state on click?

    Thanks!

    Reply

  12. Rogelio
    Aug 29, 2012 @ 2:35 am

    Eye opening Artіclе, іt is nice to find сгеatіve ωriting οn the internet, I аm really ρlеaѕеd to enсounter a blog that is nοt full of the everуԁay trash,
    bless yоu.

    Reply

  13. raman
    Oct 9, 2012 @ 6:22 am

    really nice tutorial and quite advanced

    Reply

  14. raman
    Oct 9, 2012 @ 6:28 am

    i have also designed a css top navigation menu, hope you will like this nice collection,
    here is the link
    http://www.designrapid.com/css-top-menu-navigation-tutorial/

    Reply

  15. bengellz
    Nov 21, 2012 @ 1:45 am

    woow cool css .. I really like.
    I also use, just look at my blog.

    Reply

  16. Sudhir
    Dec 5, 2012 @ 2:48 am

    woow cool css .. I really like.
    I also use, just look at my blog.

    Reply

  17. Frank
    Jan 31, 2013 @ 3:53 am

    What an amazing menue. Thx a lot!

    Reply

  18. Ivan
    Jan 31, 2013 @ 3:11 pm

    an awesome guide,ty so much!!!
    one question, how to position this menu to center of the page?

    thx a lot

    Reply

  19. Atul Mandal
    Dec 1, 2016 @ 4:57 am

    Great tutorial. This post helping me a lot. Thanks

    Reply

1 28 29 30

Leave a Reply