Sliding Door Navigation - Hover and combine images


Click on the movie reel icon to view a video demonstration. You may need to watch the video a few times to totally understand the concepts. Feel free to print out the notes and copy the code from the files which are linked at the bottom of the page.

is the final page with transparent tabbed images

You might think we would be satisfied with this example, but there is always more we can do. In sthis demonstration I will show you how to create a hover effect, and how to combine images so we use only 2 images.

New tab bar which has a hover effect and uses 2 images

In the previious demonstration the page contained 5 images.

  1. the background gradient image that displays behind the tabs.
  2. the left.gif which is the left tab in a tan color
  3. the left-on.gif the left tab in white which displays when I am on a that page
  4. the righ.gif which is the right tab in a tan color
  5. the left-on.gif the right tab in white which displays when I am on a that page

The industry standard is to combine the left and left_on image and do the same for the right images.

At the end of this demonstration we will use only 3 images.

  1. the background gradient image that displays behind the tabs.
  2. the left image which has 2 colors of the tab
  3. the right image which has 2 colors of the tab

Here are the new images, please note, that I changed the on color to green because it was easier to see.

left bothright

Now let's review the code

revised CSS code

#header li {
float:left;
background:url("left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
}

When I view the file in the browser it looks exactly the same, because we are only seeing the top of the image which is tan. Now let's add some code so the green tabs display when I hover.

new CSS

#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}

The first style is a multiple contextual selector that changes the text color to light gray and also changes the position of the background images. Instead of starting at the upper left corner the image displays 150 pixels below the top which is where the green tab it. There are also values for the width which I don't really understand but which I am grateful to see work.

Here is the tab menu with just the hover effect.

Next I want to change the CSS so that when I am on the current page, the tab is green instead of white. I modify this code

#header #current {
background-position:0% -150px;
border-width:0;
}
#header #current a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}

Here is the final file with a hover effect, and only 2 images to create the tab