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

Tags: a:hover, a:link, CSS, Menu, Nav, Navigation, Sliding Doors, XHTML

This entry was posted on Tuesday, December 16th, 2008 at 1:37 pm and is filed under Design, CSS & Xhtml. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.