Sliding Door Navigation - Introduction


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.

The sliding door navigation is one solution to the challenge of tabbed navigation. There are 2 approaches to creating tabs, sliding door and single image tabs.

Here is the finished sliding door finished navigation bar

As you view the navigation you will see image with rounded corners and a dark border. This tab menu uses 2 images that slide over each other.

Another model uses a single image which the browser redraws to fit the size of the link.

Here is a tabbed navigation bar that uses one image for the tab

As you compare these 2 navigation bars they look very similar, however the sliding door seems to be emerging as the industry standard.

Before we begin to make a sliding door navigation bar lets review the images used to make these tabs.

For the single image tabbed navigation I use this image

single image tab

For the sliding door model I use these 2 images which slide over each other I use these 2 images.

left tabthis image is the left side of the tab. right tab

the right side tab

Here is the way theses 2 image interact

door overlap

For extensive information about this code visit articles by Doug Bowman at the web site a list apart

sliding door part I

sliding door part II

Now let's create code and images to make this sliding door tab navigation work.