Images in Navigation
Friday, September 21st, 2007I was working on my site and I wanted to create a real interesting navigation bar. I started trying different CSS styles that I knew but I could not create a navbar that I wanted to use. So in my frustration I started surfing the net looking for what I would like my navbar to look like. I was just going to make a note of the url and have some else create my navbar and use that for a reference.
I came across a many sites that used great navbars but not what I had in mind for my site. Until I came across The Get Rich Secret. The site is using images for their navigation and also an image for the hover effect. When I saw that I knew that I wanted something like that for my navigation.
I started by looking at the CSS that they used for their navigation. I use Firefox so looked at that by using the View CSS function from the Web Developer Tool Bar extension. This is the HTML that they used:
<div id=”navbg1″><li><a class=”green1″href=”http://www.easydailycash.com/“><span class=”hidestuff”>link</span></a></li></div>
<div id=”navbg2″><li><a class=”green2″ href=”http://www.easydailycash.com/Program/NewEdc/OurTraining.php”><span class=”hidestuff”>link</span></a></li></div>
<div id=”navbg3″><li><a class=”green3″ href=”http://www.easydailycash.com/Program/NewEdc/TheProducts.php”><span class=”hidestuff”>link</span></a></li></div>
<div id=”navbg4″><li><a class=”green4″ href=”http://www.easydailycash.com/registration.php”><span class=”hidestuff”>link</span></a></li></div>
</ul>
</div>
So In the HTML you can see that they used a main div (mainnav) and then started a an unordered list.
In the list tag they gave each list item its own class. (navbg4).
And for the name of the link they put <span> tages and named the span “hidestuff.” That will come into play using CSS.
Then They closed the unordered list and the mainnav div. For the CSS they used:
#mainnav {
margin-bottom: 10px;
background: #1e1e1e;
width: 670px;
margin-left: 10px
}
..navbg1 {
background-image: url(http://quick-easy-income.com/css/navbg1.jpg);
}
.navbg2 {
background-image: url(http://quick-easy-income.com/css/navbg2.jpg);
}
.navbg3 {
background-image: url(http://quick-easy-income.com/css/navbg3.jpg);
}
.navbg4 {
background-image: url(http://quick-easy-income.com/css/navbg4.jpg);
}
#navbg1 a:hover{
background: url(http://quick-easy-income.com/css/navbghover1.jpg);
}
#navbg2 a:hover {
background: url(http://quick-easy-income.com/css/navbghover2.jpg);
}
#navbg3 a:hover {
background: url(http://quick-easy-income.com/css/navbghover3.jpg);
}
#navbg a:hover {
background: url(http://quick-easy-income.com/css/navbghover4.jpg);
}
So what they did was use the CSS to create the styling for the main div such as the width, background and margins. For the different classes they called out each individual li class and gave them a background image according to the name of the class. For the hover effect they called out the a:hover tag and inserted a background image according to the class, just like how they did for the main background image for the li tags.
So now that that is done you have to make the whole picture a link not just the link that you put in the HTML. That is where the <span> tag comes in. in the CSS you call out the <span> tag. In this case it is done like this; .hidestuff With this tag you use the display none tag like this. This looks like this.
hidestuff {
display: none;
}
I thought this was really interesting and and I wanted to share it with all of you. I am sure if you follow these steps you too can put images for your navigation bar on your website. For more examples of this click the links below.