Sliding Door Navigation -part 1


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.

Let's begin the demonstration by examining the HTML and CSS that makes up the core concepts of this navigation bar. The HTML is very simple:

  1. a div tag with an id of header
  2. an unordered list within the div tag
  3. the list contains links to the various pages
  4. note of the News link which has an id of "current" in the <li> tag. This code will be moved from link to link as new pages are created.

HTML code

<body>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

Now let's look at the CSS which is in the head of the document.

Embedded CSS

<style type="text/css" media="screen">
body {
background:#fff;
margin:0;
padding:20px;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}

#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
</style>

I will be skipping the body styles and go directly to the header style. This code floats the area to the left, sets the width to 100% of the screen, displays the background color to yellow, reduces the font to 93% and sets the line height to normal.

The next style controls unordered lists within the header id, margin and padding have been removed and the bullets will not display. Let's take a look at the page at this stage of the demonstration.

Sliding Door in it's early stage

I add a style for a list item within the id of header. The declaration of float:left takes the list from a stacked vertical column to a horizontal navigation bar. The other declarations remove margin and passing from the list items

new HTML code

#header li {
float:left;
margin:0;
padding:0;
}

As you view the page note the changes - sliding door as a horizontal bar

The new declarations added to the list item style will display an image for the right side of the tab. This image will not repeat, and will display from the upper right corner.

Next add a style for the <a> tag within the id of header. The style for the <a> tag causes the browser to display the link as a block which will make the entire button area within the list item "clickable" or "hot".

#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

#header a {
display:block;
}

Here is a tabbed navigation bar after adding the right side of the tab

Here are the 2 images I used to make this navigation bar

left tab and right tab