2torial Blog|photoshop tutorials, website design tutorials and graphic design articles and tutorials

Here is an easy way to make a nice CSS menu for your website that will also keep the current page highlighted in the menu. First we need a background for the menu and a mouse-over background or highlight which will also act as the current page highlight. If you want to use your own colors or pattern you can replace the link in the CSS with your own. Here are the two background images I made with Photoshop. The size of these particular images are width:15px height:40px.

Up state Down state

Click here to see the final.

This tutorial will only focus on the menu portion and not how to position it into a header. Let’s start with the html. Make a new document and name it cssmenu.html. We need to create a container for the menu with a div id called MenuHolder. Place this html code in between the body tags of your page.

<div id=”MenuHolder”>
<ul>
<li><a href=”cssmenu.html” class=”current”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”partners.html”>Partners</a></li>
<li><a href=”rss.html”>RSS</a></li>
</ul>
</div>

right now your menu looks like a list. Now we can add the css rules to style the menu. First, in the head of your html document put this line in to attach an external stylesheet: <link href=”cssmenu.css” rel=”stylesheet” type=”text/css” /> . Then open a new document and name it cssmenu.css and put it in the same directory as you html page.

In your cssmenu.css document put these lines to style the menu. If your using your own images for the menu background and highlight, you may have to tweak the padding a little if your using a different size then 15px X 40px

#MenuHolder {
font: bold 13px Arial;
width: auto;
height: 40px;
padding-left: 0px;
padding-right: 0px;
float: left;
margin-left: 0px;
margin-right: 0px;
}

#MenuHolder ul {
width: 395px; /*width of menu, you can also use percentages. Set this to your need*/
height: 40px;
border: 1px solid #748d64; /*green border*/
border-width: 1px 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
background-color: #black;
background-image: url(menu_up.jpg); /*link to the background image*/
background-repeat: repeat-x;
background-position: center center;
margin-left: 0px;

}
#MenuHolder li {
padding-left: 0px;
margin-left: 0px;
display: inline;
}
#MenuHolder ul li a{
color: #000000;
text-decoration: none;
border-right: 1px solid #748d64;
height:22px; /*Green border between menu categories*/
padding-top: 12px;
padding-right: 11px;
padding-bottom: 5px;
padding-left: 11px;
float: left;
}
#MenuHolder ul li a:visited{
color: #000000;
}

#MenuHolder ul li a:hover, #MenuHolder ul li .current{
color: #000000
background: black url(menu_down.jpg) center center repeat-x;
padding-top: 13px;
padding-bottom: 0px;
margin-top: 0px;
height: 28px;
}

The last set of rules deals with the current page being highlighted in the menu so make sure to put the class=”current” (see above html) on each page that corresponds to that link. Also, on the last set of rules, notice the top-padding was shifted down 1px from 12 to 13. This is to enhance the effect of the button being depressed.

Final