Problem
You have a navigation menu, created with Section 3.6. You want
to highlight the current page's location on the menu, as in Figure 3-25.
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>
#pagespk a#linkspk {
border-left: 10px solid #f33;
border-right: 1px solid #f66;
border-bottom: 1px solid #f33;
background-color: #fcc;
color: #333;
}
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> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/" >Writing</a></li> <li>Speaking</li> <li><a href="/contact/" >Contact</a></li> </ul> </div>
For larger sites that might contain secondary menus, stripping
out the link tags on each page increases production and maintenance time. By
marking up the links appropriately, the links can be called from a server-side
include, and then you can edit the CSS rules that control the style of the
navigation links as needed.
To expand the one CSS to include all the links in the
navigation menu, group the descendent selectors by a comma and at least one
space:
#pagehom a#linkhom:link,
#pageabt a#linkabt:link,
#pagearh a#linkarh:link,
#pagewri a#linkwri:link,
#pagespk a#linkspk:link,
#pagecnt a#linkcnt:link {
border-left: 10px solid #f33;
border-right: 1px solid #f66;
border-bottom: 1px solid #f33;
background-color: #fcc;
color: #333;
}
