Navbars with background images – tutorial

Navbar

I’ve produced a few sets of navbar images for free download dark, light, frosty, and original. In this tutorial I’m going to explain how to use them in your own site design.

This screenshot is taken directly from one of my free html templates. The HTML to create this is a basic list of links but without the CSS it looks quite boring, just a link, then a new line and another link and so on, however, once the CSS is added, you get an attractive navbar.

Start with a block of HTML code like this;

<div id=”navigation”>
<div id=”navbar_link”>
<ul>
<li><a href=”#” class=”currentpage”>Home</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>My Flickr</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div><!– end of navbar_link –>
</div><!– end of navigation –>

Each of the navbar images in the zipfiles has two parts to it. A top gradient and a bottom gradient, and when we add this image as the background to our navbar the CSS tiles it across the width of the containing div, and this looks really attractive on it’s own, but then we shift the image upwards using CSS when the user hovers over one of the links to show the bottom gradient which is slightly darker in every case than the top gradient.

Here’s the CSS you need;

#navigation {
width: 960px;
background: url(img/nav_dkblue.png) top center repeat-x;
height: 31px;
border-top: #58b2eb solid 1px;
margin-bottom: 20px;}

#navbar_link {
height: 30px;
float: left;}
#navigation #navbar_link ul {
float: left;
height:30px;
width: 100%;
list-style-type: none;}

#navigation #navbar_link ul li {
display: inline;}

#navigation #navbar_link ul li a {
padding: 6px 15px;
color: #fff;
text-decoration: none;
line-height: 1.6em;
float: left;
border-right: 1px solid #0c5684;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;}

#navigation #navbar_link a:hover {
text-decoration: none;
border-right: 1px solid #0c5684;
color: #fff;
background: #ddd url(img/nav_dkblue.png) center -33px repeat-x;}

.currentpage a {
background: #ddd url(img/nav_dkblue.png) center -33px repeat-x;}

In your own site layout you’ll need to change the width of #navigation if your design is not 960px wide. You’ll also need to change some of the colors in the CSS since the colors listed here were picked to match the blue gradients in my template. Other than that, you should be able to use this CSS as it is.