Hey all, I have created a few more menus for you to download and use in your projects. If you would like to learn how to create these menus yourself you can refer to my recent tutorial here.

I have included the .psd, HTML & CSS files within each download to make it easier. Remember, if you use them in a project i would like to hear about it….That’s why i have a comment box

Click here for a demonstration.

Download: Red Menu
Download: Blue Menu
Download: Black Menu

Want more? Comment below and let me know.

In this tutorial I am going to explain how to create a sliding door navigation menu using only CSS. When you have finished the tutorial you will finish with something like this.

you will notice that when you hover over any of the links in the example the button state changes to reflect it and it seems as if only one image is used. This is not the case!! Sliding door menus use two images , one for the left and one for the right. I am also implementing my CSS menu trick so we use only one image for the left hover and link state and likewise for the right reducing flicker and making the script lighter.

The source files for this tutorial are included and the menu has been tested in IE6, IE7, Firefox & Safari (Windows). Onward bound…

The images

For this menu we use a total of two images for the entire effect. Amazing huh? The images are specially laid out like so:

The way the images are laid out allows us to use longer links if we need to and the buttons will automatically expand to fit.

The HTML

The HTML for the menu is very simple and takes up few lines.

<div id="aqua_blue_nav">
<ul>
 <li id="selected"><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Longer Link 1</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Another Long Link</span></a></li>
</ul>
<br style="clear:both" />
</div> 

You will see that the links are contained within two HTML elements (Link & Span) within the li tags. This is to allow us to call CSS functions to control them as we need to so lets break it down and actually explain what we are doing.

Link 1: <li><a href=”#”><span>Link 2</span></a></li>. You can see that link two is contained within an li tag  and within that we have a simple href tag and within that a span tag.

The href uses the following rule

#aqua_blue_nav a {
 background-image: url(aqua_blue/nav_left.gif);
 background-repeat: no-repeat;
 background-position: left bottom;
 display: inline-block;
 height: 37px;
 line-height: 37px;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding-left: 12px;
}

What we are doing here is declaring that any link within the navigation must use the left image in its normal state positioned to the left but the problem we have here is that the left image has no curve on the right side making the link look incomplete so we need to find a way of adding the right image into the link too. This is accomplished by calling the span tag from within the link using the following CSS.

#aqua_blue_nav a span {
 background-image: url(aqua_blue/nav_right.gif);
 background-repeat: no-repeat;
 background-position: right bottom;
 height: 37px;
 display: inline-block;
 padding-right: 12px;
 cursor: hand;
}

Now our link has a left image and a right image associated with it and will expand to fit the text you require within the button but how do we now do the same but for the hover effect? Simple..we target the elements exactly the same as we just did but instead of simply using #aqua_blue_nav a, we will be using #aqua_blue_nav a:hover which tells the browser that the link has our mouse over it so it should change. We do this by using the following CSS.

#aqua_blue_nav a:hover {
 background-image: url(aqua_blue/nav_left.gif);
 background-repeat: no-repeat;
 background-position: left top;
 display: inline-block;
 height: 37px;
 line-height: 37px;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding-left: 12px;
}
#aqua_blue_nav a:hover span {
 background-image: url(aqua_blue/nav_right.gif);
 background-repeat: no-repeat;
 background-position: right top;
 height: 37px;
 display: inline-block;
 padding-right: 12px;
 cursor: hand;
}

You can see that the above CSS is calling the use of the exact same images as the normal state but if you check out the background-position you will see that the position has changed from bottom to top! Basically the CSS is telling the browser that when the links are hovered over the background must rise to the top giving the desired effect.

On my demonstration you will see that the first link already looks like it is being hovered over! We achive this by targetting the actual li tag holding the href with the CSS rule “#selected” and using the following:

#selected a {
 background-image: url(aqua_blue/nav_left.gif);
 background-repeat: no-repeat;
 background-position: left top;
 display: inline-block;
 height: 37px;
 line-height: 37px;
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding-left: 12px;
}
#selected a span {
 background-image: url(aqua_blue/nav_right.gif);
 background-repeat: no-repeat;
 background-position: right top;
 height: 37px;
 display: inline-block;
 padding-right: 12px;
 cursor: hand;
}

This is telling the browser that any link with the id selected must act like its been selected to notify the user of what page they are currently viewing. Try switching the id onto another link and you will see another link take the selected state. Using this method you can design your own menus in minutes and minimum code. These menus can add a lot of sparkle to any websites navigation menu. If you have used this tutorial to build your own menu please let me know.

As usual, any questions please use the comments box. I have attached the source files below and you can view a demonstration here

Source Files: .PSD, HTML & CSS – Download

There will be a few steps covered but i will try to explain it as simple as i can

Step 1 – The Image

First we need to open Photoshop or the graphics program of your choice and create an image 110px x 80px. This is to be the only image we will use for our navigation. Notice how I have both of the buttons (normal state & hover state) in the one image.

Step 2 – The XHTML

Now its time to fire up your coding program, In my case it is Dreamweaver. Create a new html document and name it navbar.html then save the file.

Now add right after the body tag the following code:

<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>

Step 3 – The CSS

Create a new css file and add the following

#navigation li {
	display: block;
	list-style-type: none;
	float: left;
}
li a:link, li a:active, li a:visited {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left top;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}
li a:hover {
	background-image: url(YOURIMAGE);
	background-repeat: no-repeat;
	height: 40px;
	width: 110px;
	line-height: 40px;
	background-position: left -40px;
	margin-right: 2px;
	display: block;
	text-align: center;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
}

And that is it you are done You should have ended up with this Click me

Explanation

This takes away all of the strain and bloaty code of javascript and also preloads the image so you do not get that nasty flicker effect.

Because the image loaded initially is the double button image the rollover is instant in its rolled on state. The hover state called upon in the li tag basically tells the bg to rise 40px on rollover.

I hope that I have helped you with your CSS Tabbed Navigation woes. If you feel something would be better another way then please do let me know