O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Text Navigation Menus and Rollovers

Problem

You have a list of links, but you want to build an elegant menu, as shown in Figure 7-11.

A set of stylized links

Figure 7-11. A set of stylized links

Solution

First, mark up the list of links in an unordered list so that they wrap around a div element with an id attribute:

<div id="navsite">
 <p>Site navigation:</p>
 <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>

Next, use the border property on the anchor elements to create the bulk of the design:

#navsite p {
 display: none;
}
a {
 text-shadow: 0 −1px 0px rgba(0,0,0,.8);
}
#navsite {
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size: 1em;
 font-weight: bold;
 border-right: 1px solid #666;
 padding: 0;
 margin-bottom: 1em;
 color: #333;
 width: 15em;
}
#navsite ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navsite ul li {
 margin: 0;
 border-top: 1px solid #003;
}
#navsite ul li a:link, #navsite ul li a:visited {
 display: block;
 padding: 4px 4px 4px 0.5em;
 border-left: 10px solid #369;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369; color: #E5DEAC; text-decoration: none; background-color: #495961; background-image: url(title-glass.png); background-position: 50%; background-repeat: repeat-x; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required