Oct 29
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.
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.
Design Watercolor Effect Menu Review: PayPal Redesign
Comments
Pages: 43 42 41 40 39 38 37 36 35 34 33 … 1 » Show All
There are 427 comments (+Add)
Pages: 43 42 41 40 39 38 37 36 35 34 33 … 1 » Show All
Loading ...
427 Tom Koel http://www.tomkoel.com
January 31st, 2010 at 7:36 pm
I used your advanced CSS menu for a footer as well. I’m a super novice. Seems to work great until I try to control the position of the header. If I make the header absolute (say at 1100), my footer pics wind up another 1100 px below. I don’t mind a relative footer, but I’ve got a self-made background that I must use and I can’t get it to trim up to the relative bottom of the page. Maybe that would be easier. Whatever you could offer for help would be great. Thanks.
426 turismo china http:www.vacacionchina.com
January 29th, 2010 at 1:37 am
Very helpful to me,thank you for sharing!
425 Asterius@hk
January 20th, 2010 at 3:01 am
it’s great!
424 vincent http://www.webvincent.com
January 17th, 2010 at 11:14 am
wow.. i like this
423 Avangelist http://www.avangelistdesign.com
January 13th, 2010 at 9:48 am
I just wondered why have the descriptions as a separate image and not part of the roll over state? if you reversed the order in which you position the graphics you could achieve the same thing?
422 Bindi http://bunty.me
January 12th, 2010 at 7:26 am
Very helpful one…thank you for sharing!
421 内衣 http://www.piaoya.net
January 12th, 2010 at 4:24 am
Nice Article. Thanks for sharing.Quite elaborated and informative tutorial.
But i must say that http://www.piaoya.net has done a superb job for me. Since I did not have time to convert the design my self I outsourced it to them and what they delivered was just mind blowing. Great code quality and that too in just 8 hours.
I would recommend to try them at least once. You will be amazed with the code quality.
420 vincentdresses http://www.hibridal.com
January 5th, 2010 at 11:29 pm
The designs showed here show what simple and tasteful design is all about. Another one to consider
419 Jessica
January 4th, 2010 at 11:43 pm
Is there a way to convert this into a drop down menu? I used this tutorial to create a menu but a few of my items need dropdowns to go along and I cannot figure out how to make that work.
418 Arisu
January 4th, 2010 at 9:07 pm
Would it be alright to do this in Gimp 2.6 instead of Photoshop? Would I get the same result?
Thanks
Arisu