Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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; ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required