As with all facets of web design, there are many ways to do a task and get the same (or similar) results. This chapter presents methods for making lists using XHTML and how the lists will look on a variety of devices, including handhelds. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)
Making Lists Using XHTML - Lists that Navigate (Page 4 of 5 )
I’ve shared a few methods of turning unordered lists into horizontal navigation on my personal site (www.simplebits.com), creating tab-like effects using ordinary, structured XHTML—just like the example grocery list.
For instance, here we’ll take the grocery list and turn it into a navigation bar for an online supermarket (that happens to only sell a handful of items).
We’d like the navigation in this case to be horizontal and also have some way of highlighting an item when it’s hovered over or selected, creating a tab-like effect.
First, we’ll add an id to our list so that we can apply specific CSS styles to it. We’ll also make each grocery item a link.
What we’ve done here is essentially turn off bullets and default indenting. We’ve also taken the first step in making the list horizontal, rather than vertical, by setting the display to inline. A bottom border has been added as well to help define the group of links.
The second step in making the navigation bar horizontal is to float our links to the left. We’ll also style the hyperlinks a little and adjust some padding and margins:
Here we’ve told all a elements within our list to float: left, essentially forcing them all to line up horizontally in a row. We’ve also added some color, made the links bold, and turned off underlines.
Next, create a tab-like border below the links that is activated when hovered or selected:
For highlighting and hovering, we’ve added a 4-pixel-tall bottom border to the selected or hovered <li> elements to create a tab-like effect. Highlighted tabs can also be “kept lit” by adding class="active" to the href of our choice:
This active class shares identical CSS rules with a:hover. Figure 1-7 shows the resulting navigation bar.
Figure 1-7. The resulting mini-tab navigation bar
I’ve used this method of navigation for my own personal site (www.simplebits.com) as well as on an Inc.com (www.inc.com) redesign in July 2003. Feel free to check the source of these sites for more code examples.
This chapter is from Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.