3.12. Creating Contextual Menus

Problem

You have a navigation menu, created with Recipe 3.6. You want to highlight the current page’s location on the menu, as in Figure 3-25.

The navigation set of links

Figure 3-25. The navigation set of links

Solution

Place an id attribute in the body element of the web document:

<body id="pagespk">

Also, place id attributes in the anchor elements for each link in the menu:

<div id="navsite">
  <h5>Site navigation:</h5>
  <ul>
   <li><a href="/" id="linkhom">Home</a></li>
   <li><a href="/about/" id="linkabt">About</a></li> 
   <li><a href="/archives/" id="linkarh">Archives</a></li>
   <li><a href="/writing/" id="linkwri">Writing</a></li>
   <li><a href="/speaking/" id="linkspk">Speaking</a></li> 
   <li><a href="/contact/" id="linkcnt">Contact</a></li>
  </ul>
</div>

With CSS, place two id selectors into one descendent selector to finish the menu (see Figure 3-26):

#pagespk a#linkspk {
 border-left: 10px solid #f33;
 border-right: 1px solid #f66;
 border-bottom: 1px solid #f33; 
 background-color: #fcc; 
 color: #333; 
}
The current link is different from the rest of the links

Figure 3-26. The current link is different from the rest of the links

Discussion

If you have a small site, you can show a link in a set of navigation links representing the current page by stripping out the anchor link for that page:

<div id="navsite"> <h5>Site navigation:</h5> <ul> <li><a href="/"Home</a></li> ...

Get CSS Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial