CSS Tab Navigation Without Javascript

CSS Tab Navigation Without Javascript

In this article I will show you how you can develop a simple navigation bar using one image and only CSS. You do not have to use any JavaScript to achieve this effect. The benefit is it uses a list displayed horizontally so if styles are turned off you get just plain text. Pretty cool! So let’s have a look at what we are going to create. Click here to see the demo.

First we need to create the look of our buttons and navigation bar. The graphic I used was really simple but because the buttons are in a relative position to the rest of the page, you can create decorative and creative designs and place it anywhere on the page. I used Fireworks here to create 4 buttons with 4 variations for each button.

In the image below I evenly placed each button graphic. I made each space between the buttons the same pixels to make it easy to plan the CSS layout in the future. The red boxes just show a quick way to double check the height and widths were correct.

Here is a close up in Fireworks again checking the alignment of each button graphic. Once you have this evenly laid out you can drag the slice up and down and know where each background image will need to be placed using the properties in Fireworks to note exactly to the pixel where each graphic is positioned.

OK so lets look at the CSS. For the purpose of the tutorial my navigation is one DIV that is 534 x 51 pixels. So you can take this an apply it your project and position it anyway you like. I first declared the styles for the “a: links such as active, hover and visited. You probably will have these for your page but in my example its only the navigation bar. And if the styles are turned off you want to make sire the links appear as clickable text.

We set the style for the DIV called #navigation. This will be the container for everything. This will make it easier to move and position on your page.

#navigation {
width:534px;
height:51px;
display:block;
background-image: none;
overflow:hidden;
position: relative;
float: left;
}
#nav {
width: 534px;

ul#nav li a {
position: absolute;
top: 0px;
width: 92px;
overflow: hidden;
height: 51px !important;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: left;
text-decoration: none;
text-indent: -9000px;
}

Here we are declaring the ID of “nav” this will help declare the specific list were are styling.

Here I am displaying the line items in line floating left to and turning off any styles.

#nav li {
float: left;
display: inline;
list-style-image: none;
list-style-type: none;
text-decoration: none;
}

Here we set the style for the UL specifically calling the ID. You probably wouldn’t have another nav on the page but this is just the ID I chose to use. But you may have another list so the ID is important.

ul#nav {
position: relative;
top: 0px;
left: 0px;
width: 534px;
height: 51px;
list-style-type: none;
overflow: hidden;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Here we are relying on the Body ID to declare what page we are on and declare the correct style. Here the Body ID is page1.

Here we are identifying each link and it’s hover state as well as using the Body ID for the page. This comes in handy when you can mark the page the visitor is on.

body#page1 ul#nav {
width: 534px;
height: 51px;
}

body#page1 li#link1 a {
width: 158px;
left: 0px;
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

body#page1 li#link1 a:hover {
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

Now just duplicate this last block of CSS for each link changing the background image coordinates. I find easiest to copy the code and duplicate it and change the image coordinates. This way it saves time and you won’t make any typos creating more work for yourself. Click here to see the demo and you can view the source for the CSS. Contact me if you have any questions.

Subscribe to my feed for more articles and tutorials.