24.7.
List-Based
Navigation Bars
Horizontal navigation
toolbars
are a staple of web interface design. Traditionally, they were created with some number of adjacent text links or a line-up of images. Either way, there wasn't much meaning to their markup in the document source. When you think about it, it makes sense for a list of navigational options to be
marked
up as a list in the source. With CSS, it is possible to give it the appropriate semantic markup while visually presenting the options as a familiar horizontal bar.
There are two
methods
for changing a bulleted list into a horizontal navigation bar. The first makes the list items display inline instead of
stacked
(the default display mode for block elements). The second uses floats to line up the list items and links. Both examples below use this markup for an ordinary unordered (bulleted) list with five list items. Figure 24-15 shows how it looks using the default browser styles.
<ul id="nav">
<li><a href="/">Water</a></li>
<li><a href="/">Fire</a></li>
<li><a href="/">Air</a></li>
<li><a href="/">Earth</a></li>
<li><a href="/">Beyond</a></li>
</ul>
24.7.1. Inline List Items
We'll start with the minimum style rules for removing the bullets (
list-style-type: none
) and making the list items appear
next
to each other instead of in a list (
display: inline
). The margins and padding are set to 0 to prepare for anchor (
a
) element styling. The results of the styles thus far are shown in Figure 24-16.
ul#nav {
list-style-type: none;
margin: 0px;
padding: 0px; }
ul#nav li {
display: inline;
}
With the pieces in place, you can then apply any style to the anchor (
a
) elements. In this example, the link underlines have been removed and a border, a background
color
, and padding have been added. An alternate style has been specified for the rollover state as demonstrated in the previous section. The resulting navigation list in Figure 24-17 is just one simple example of what can be done.
ul#nav li a {
padding:
5px 20px
;
margin:
0px 2px
;
border:
1px solid #666
;
background-color:
#CCC
;
text-decoration:
none
;
text-align:
center
; }
ul#nav li a:hover {
background-color:
#333
;
color:
#FFF
;
24.7.2. Floated List Items
The other method for creating horizontal lists uses the
float
property to cause the list items to line up next to one another. When using
float
, it is important to set the following element in the source to
clear: both
to ensure that no page content wraps around the list.
This is just one of many variations on formatting navigation with floated list items. The primary steps are turning off the bullets (
list-style: none
), floating each list item (
float: left
), and then applying styles to the links (
a
) as block elements.
ul#nav {
list-style: none;
margin: 0;
padding: 0; }
ul#nav li {
float: left;
margin:
0 2px
;
padding:
; }
ul#nav li a {
display: block;
/* allows width and height settings on a element */
float: left;
/* provided only to fix display in IE-Mac */
width:
100px
;
height:
28px
;
line-height:
28px
;
background: url(
tab.gif
)
#CCC
no-repeat;
text-decoration:
none
;
text-align:
center
; }
/* Commented backslash hack hides rule from IE5-Mac \*/
ul#nav li a { float: none; }
/* End IE5-Mac hack */
ul#nav li a:hover {
background: url(
tab_over.gif
)
#333
no-repeat;
color:
#FFF
; }
This time instead of a solid background color, each link is styled with a background image that changes for rollovers, as shown in Figure 24-18.
24.7.3. More List and Tabbed Navigation Tutorials
The example in this section is only the most elementary introduction to how CSS can be used to create tabbed navigation from semantically logical list markup. For more sophisticated techniques and
in-depth
tutorials , these are just a few of the
numerous
resources online.
-
"Sliding Doors of CSS (Parts I and II)," by Douglas Bowman (www.alistapart.com/articles/slidingdoors and www.alistapart.com/articles/slidingdoors2)
-
A problem with the floated list example above is that if a
user
resizes the text, it will bust out of the tab graphic. In this article, Doug Bowman introduces his ingenious technique for graphical tabs that resize larger with the text.
-
"Accessible Image-Tab Rollovers," by David Shea (www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html)
-
This tutorial combines list-based tabbed navigation with image-replacement techniques.
-
"CSS Design: Taming Lists" by Mark Newhouse (www.alistapart.com/stories/taminglists)
-
This article
demonstrates
a number of CSS tricks for controlling the presentation of lists, including various inline list item applications.
|
