SEARCH

CSS Menu

2torial Blog Tutorials Dec 23, 2009

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="/img_articles/16656/cssmenu.html" class="current">Home</a></li>
<li><a href="/img_articles/16656/about.html">About</a></li>
<li><a href="/img_articles/16656/contact.html">Contact</a></li>
<li><a href="/img_articles/16656/products.html">Products</a></li>
<li><a href="/img_articles/16656/partners.html">Partners</a></li>
<li><a href="/img_articles/16656/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="/img_articles/16656/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.

Click here to see final result.

subscribe to newsletter