After seeing an amazing design tutorial on PSDTUTS for a Vista Style menu design a decided to give it ago and turn their design into reality. Well I’ve built it and it looks pretty good (see the css vista menu demo) so I thought I would share how I did it with the world.
step one
Create a PSD of the menu as details in the PSDTUTS article linked above.
step two
Cut out the images required for the menu design and save them to an images folder at the root of your site. The required images are as follows:
- A one pixel wide image of the background of the menu. (nav-bg.gif)
- A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)
- An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)
step three
Build the HTML structure:
<div id="main-nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
<div class="clear-both"> </div>
</div>
As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".
HTML wise that is it really. Just drop this in to the body of the site.
step four
Now we need to style the menu using the images we previously cut out as detailed below:
body{
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
}
#main-nav{
height:29px;
float:left;
background-image:url(../images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
The code above sets the default font and font size for the body of the document. You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.
The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
Next we need to remove the default padding/margin and bullets applied to unordered lists.
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(../images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side. Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other. In this example the width is fixed to 80px but this is very much up to you and your design. A line-height si also set to equal the applied height forcing the text to vertically align to the middle.
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(../images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
Now we need to style the "a" tag itself. Again it has been given the same width and height as the li tag and floated left. This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6. Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li.active a,
#main-nav li a:hover{
background-image:url(../images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
Finally we need to add the link styling and active/hover states. The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.
Now all you need to do is check it out in your browser. Enjoy..
demo
Check out the CSS Vista Menu Demo for yourself.
download
Download the CSS Vista Menu.
