Recipe 6.8. Building Horizontal Navigation Menus


Problem

You want to create a horizontal navigation menu out of an unordered set of links; Figure 6-7 shows the default, and Figure 6-8 shows what you want.

Figure 6-7. The default appearance of the links


Solution

First create a properly constructed set of unordered links:

 <div >  <h5>Site navigation:</h5>  <ul>   <li><a href="/">Home</a></li>   <li><a href="/about/">About</a></li>    <li><a href="/archives/">Archives</a></li>   <li><a href="/writing/">Writing</a></li>   <li><a href="/speaking/" >Speaking</a></li>    <li><a href="/contact/">Contact</a></li>  </ul> </div>              

Figure 6-8. The tab-based navigation


Then set the CSS rules for the navigation structure, making sure to set the display property of the list item to inline:

#navsite h5 {  display: none; } #navsite ul {  padding: 3px 0;   margin-left: 0;   border-bottom: 1px solid #778;   font: bold 12px Verdana, sans-serif;  } #navsite ul li {  list-style: none;  margin: 0;   display: inline;  } #navsite ul li a {  padding: 3px 0.5em;   margin-left: 3px;   border: 1px solid #778;  border-bottom: none;  background: #dde;  text-decoration: none; } #navsite ul li a:link {  color: #448; } #navsite ul li a:visited {  color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover {  color: #000;  background: #aae;  border-color: #227; } #navsite ul li a#current {  background: white;   border-bottom: 1px solid white; }

Discussion

The first part of the solution hides the heading. This is done because the visual representation of the tab navigation design is enough to inform users that these are navigation links:

#navsite h5 {  display: none; }

The next rule defines the padding and margin for the box that is created by the unordered list element, ul. The line that stretches across the bottom of the folder tabs is drawn by the border-bottom property (see Figure 6-9):

#navsite ul {  padding: 3px 0;   margin-left: 0;   border-bottom: 1px solid #669;    font: bold 12px Verdana, Helvetica, Arial, sans-serif;  }

Figure 6-9. The line the navigation tabs rest upon


The declaration that makes this horizontal navigation work with the unordered list is display: inline for the list item:

#navsite ul li {  list-style: none;   margin: 0;   display: inline;  }

Instead of stacking the list items on top of each other by default, the browser now lays out the list items as it would text, images, and other inline elements (see Figure 6-10).

Figure 6-10. The list spread out horizontally


To create the look of the folder tab, use the border property in the following CSS rule:

#navsite ul li a {  padding: 3px 0.5em;   margin-left: 3px;   border: 1px solid #669;   border-bottom: none;   background: #ccf;   text-decoration: none;  }

The first border property is a shorthand property that dictates a solid, one-pixel border around the link. However, immediately following the border property is the border-bottom property, which tells the browser not to display a border beneath the link.

The value of the border-bottom property is displayed over the border shorthand property (see Figure 6-11). This overwriting occurs because the border-bottom declaration overrides the values in the border declaration because of the order in which they are declared.

After creating the look of the border tab, set the color of the text links and rollover states:

#navsite ul li a:link {  color: #339; } #navsite ul li a:visited {  color: #666; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover {  color: #000;  background: #aae;   border-color: #336;  } 

Figure 6-11. The tabs appear


The final CSS rule defines how the "current" link appears. This style is applied to the link that represents the page being viewed by the user (see Figure 6-12):

#navsite ul li a#current {  background: white;   border-bottom: 1px solid white;  } 

Figure 6-12. The look of the current link


See Also

The original tab menu bar (as well as other navigation styles) at http://css.maxdesign.com.au/listamatic/horizontal05.htm.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net