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; } #crumbs ul li { display: inline; } #crumbs ul li a:link { padding: .2em; }
Within each nested list, place a small background image of an arrow to the left of the link:
crumbs ul ul li{ background-image: url(arrow.gif); background-repeat: no-repeat; background-position: left; padding-left: 12px; }
Discussion
Based on the fairy tale Hansel and Gretel, a breadcrumb trail is used to help people ...
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.