5 replies to this topic

[popoxinhxan]

Hi guys, I am a newbie web designer and i would like to have a side menu like this site http://www.microsoft.com/windowsvista/feat...ome/safety.mspx
Could you please guide me how to make it using css and photoshop

Thank you very much

[tiki]

Youd have to create the menu first in photoshop. Slice the images how you want it and name them menu-home.gif. Also create a hover effect on the images also and call the images, menu-home-over.gif or something.

Then the css, the menu would be a ul list.

<ul>
<li class="home"><a href="">Home</a></li>
</ul>

Then something like this:

.home {
width: 100px;
height: 45px; }

.home a {
display: block;
font-size: 0pt;
color: white;
background: #ffffff url("images/menu-home.gif") no-repeat; }

.home a:hover {
background: #ffffff url("images/menu-home-over.gif") no-repeat; }

We can get the css working perfectly later, just get the photoshop images first.

[l3lueMage]

http://www.pixel2life.com/tutorials/CSS_St...0over%20buttons

[popoxinhxan]

tiki, on Mar 14 2006, 03:24 PM, said:

Youd have to create the menu first in photoshop. Slice the images how you want it and name them menu-home.gif. Also create a hover effect on the images also and call the images, menu-home-over.gif or something.

Then the css, the menu would be a ul list.

<ul>
<li class="home"><a href="">Home</a></li>
</ul>

Then something like this:

.home {
width: 100px;
height: 45px; }

.home a {
display: block;
font-size: 0pt;
color: white;
background: #ffffff url("images/menu-home.gif") no-repeat; }

.home a:hover {
background: #ffffff url("images/menu-home-over.gif") no-repeat; }

We can get the css working perfectly later, just get the photoshop images first.

Thank you for your help, one thing that i concerned about the first image (menu item) that has the top round conners,but the others hasn't , how can we use css to display that.

[coolaid]

an id for each list item (its not suppose to be a class...)
like this:

<!-------------- xHTML ---------!>
<ul id="menu">
  <li id="menu_home"><a href="#"></a></li>
  <li id="menu_about"><a href="#"></a></li>
</ul>

<!----------------- Css ---------------!>
#menu{
  margin:0;
  padding:0;
}

#menu ul li{
  list-style-type:none;
}

#menu_home a:link,
#menu_home a:visited{
  display:block;
  width:100px;
  height:50px;
  background-image:url(dir/to/home_bg.gif);
}

#menu_home a:active,
#menu_home a:hover{
  background-image:url(dir/to/home_bg_hover.gif);
}

#menu_about a:link,
#menu_about a:visited{
  display:block;
  width:100px;
  height:50px;
  background-image:url(dir/to/about_bg.gif);
}

#menu_about a:active,
#menu_about a:hover{
  background-image:url(dir/to/about_bg_hover.gif);
}

[tiki]

Well I used class if he wanted to repeat an image. But it wouldnt matter none the less. If you want that hovered image to stay hovered when clicked, his is a little better. But once you know what you want done with the images, the css would be easy.