Tutorial: How to create an image navigation bar with CSS

There are times when we want to build a navigation bar for ourselves in the simplest form. Especially when we want an image on top of an image or below an image but perform it with many many redundancy codes made in HTML, CSS or even involved JavaScript. What i am going to demonstrate here is a simple yet powerful method we can all use in CSS to create such navigation bar that attached an image on top of it.

The Problem

I wanted to create a navigation bar that will display an image when hover on it and display when it is not being hovered.

The Concept

The solution to this problem is fairly simple but usually over complicated. We want an image and a word to be placed together in the same row and column on the navigation bar. Some people will do this with the following methods:

  • Create a two row of div block align them perfectly top to be image, bottom to be word
  • Use jQuery or JavaScript to assist with the effect and display of the image
  • Use position absolute to align it on top of the image
  • The list goes on..

To be honest, what we really need is just an unordered list with some CSS. What we do is to stretch the list box so that it can contain an image and place a anchor as the child of the list. This way, the image can be display on the list box as background while the word will always be display as it is. Simple and sweet.

Solution

I will split this into two section as this is all we need to accomplish this effect, HTML and CSS.

HTML

			<ul id="content-nav">
				<li class="boxes" id="0"><a href="#">HOME</a></li>
				<li class="boxes" id="1"><a href="#">ROCK</a></li>
				<li class="boxes" id="2"><a href="#">BAD</a></li>
				<li class="boxes" id="3"><a href="#">TIME</a></li>
			</ul>

Assume we have an unordered list as shown above in HTML. Now we will use CSS to demonstrate how it can be done.

CSS

#content-nav
{	
	list-style: none; /*removes the underline below the link*/
	padding: 0; /*removes the padding*/
}
#content-nav li
{
	
	float: left; /*this makes the element displays in a horizontal line*/
	width: 50px; /*This allows the picture to be fit in the block*/
	height: 50px; /*This allows the picture to be fit in the block*/
	margin-left: 50px;
	cursor: pointer;
	
}
#content-nav li:hover
{
	background: transparent url(../images/1.png) no-repeat top center; /*this makes the picture appears in the top center without any repeats*/
}
#content-nav li a
{
	color: #777;
	display: block;  /*The element will be displayed as a block level element */
	width: 50px; /*This allows the picture to be fit in the block*/
	padding: 50px 0px 5px; /*There is 60px of padding on the top, 10px of padding on the right and left, and 5px of padding on the bottom*/
	text-decoration: none; /*removes all text decoration*/
}

What we do here is to remove all styling on the anchor so that it won't display any underline etc. Then, we set the anchor to display: block so that it will go to the next line after the image appeared. but we will have to provide a space for the image. Thus, padding is used instead. The description i am talking about is located at #content-nav li a. We set the background image when hover with this CSS declaration #content-nav li:hover. Others should be self explain stuff.

Demo

You can view the demo site at CSS image navigation bar with CSS. It will display the image when mouse hover. Cheers

No related posts.