CSS : Links and Navigation - [3.7] Creating Collapsible Menus

Problem

You want to hide a set of links and give the user a way to reveal those links when needed. For example, rather than two bullet lists of links, hide one (as shown in Figure 3-6) and let the user reveal it by clicking on a + sign as in Figure 3-7.

Figure 3-6. Preventing the second set of links from displaying

Figure 3-7. The links displayed when the link on the heading is clicked

Solution

CSS : Links and Navigation - [3.8] Building Horizontal Menus

Problem

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

Figure 3-8. The default appearance of the links

Figure 3-9. The tab-based navigation

Solution

First create a properly constructed set of unordered links:

 <div id="navsite">

 <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/" id="current">Speaking</a></li> 

  <li><a href="/contact/">Contact</a></li>

 </ul>

</div>

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 3-10):

#navsite ul {

 padding: 3px 0; 

 margin-left: 0; 

 border-bottom: 1px solid #669; 

 font: bold 12px Verdana, Helvetica, Arial, sans-serif; 

}

CSS : Links and Navigation - [3.9] Creating Breadcrumb Navigation

Problem

You want to use a nesting listing as shown in Figure 3-14 to create a line of breadcrumb navigation, which is a set of links that lead back to the home page (see Figure 3-15).

Figure 3-14. The default rendering of the nested listing

Figure 3-15. The breadcrumb trail

Solution

The first step is to create a properly constructed set of nested, unordered links that represent the page's location in the site:

<div id="crumbs">

 <h3>Location:</h3> 

<ul>

 <li><a href="/">Home</a>

  <ul>

   <li><a href="/writing/">Writing</a>

    <ul>

     <li><a href="/writing/books/">Books</a>

      <ul>

       <li><a href="/writing/books/">CSS Cookbook</a></li>

      </ul>

     </li>

    </ul>

   </li>

  </ul>

 </li>

</ul>

</div>

Now set the display property of both the ul and the li of the lists:

#crumbs {

 background-color: #eee;

 padding: 4px;

}

#crumbs h3 {

 display: none;

}

#crumbs ul {

 display: inline;

 padding-left: 0;

 margin-left: 0;

}

CSS : Links and Navigation - [3.10] Creating Image-Based Rollovers

Problem

You want image-based rollovers to replace text links.

Solution

First, wrap the text inside the anchor element in a span:

<a href="/" id="linkhome"><span>Homepage</span></a>

Next, instead of JavaScript, use the background-image property within the pseudo-class selectors :hover and :active to swap the images (see Figure 3-17):

a span {

 display: none;

}

a:link { 

 display: block;

 width: 125px;

 height: 30px;

 background-image: url(btn.gif);

 background-repeat: no-repeat;

 background-position: top left;

}

a:link:hover { 

 display: block;

 width: 125px;

 height: 30px;

 background-image: url(btn_roll.gif);

 background-repeat: no-repeat;

 background-position: top left;

}

a:link:active { 

 display: block;

 width: 125px;

 height: 30px;

 background-image: url(btn_on.gif);

 background-repeat: no-repeat;

 background-position: top left;

}

Figure 3-17. The link with default, rollover, and active states

Discussion

Replacing text with an image has five benefits. First, it separates the text from the presentation. The image that contains more elaborately formatted type is part of the presentation and therefore controlled by a style, while the content in the markup remains pure text. The second benefit is that an image heading can be modified across a whole site by one change of the style sheet. The third benefit is that this method works for alternative styles and style sheet switching.

With a span element inside an element, it is possible to hide HTML text and let a design element, such as a rollover image, show as a background image. The fourth benefit of this Solution is that if a user doesn't have CSS enabled in his browser, the default HTML text will display instead, sparing the user from having to download unneeded images. The fifth benefit is that the solution is cleaner and simpler than one that involves JavaScript.

CSS : Links and Navigation - [3.11] Designing a Dynamic Visual Menu

Problem

You want to build a curved tab navigation menu that works even when text is resized; Figure 3-21 shows the default.

Figure 3-21. The dynamic folder tab navigation

Solution

First write the markup for the navigation menu:

<div id="header">

 <h2>Personal Site dot-com</h2>

 <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 id="current"><a href="/speaking/">Speaking</a></li> 

  <li><a href="/contact/">Contact</a></li>

 </ul>

</div>