ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS
This is the basis of every primary navigational interface you’ll build in this chapter. To save space, you won’t
always need to include full accessibility features, but it is very important that you use these features in your final
production code.
■Note Under some circumstances and with certain combinations of CSS rules it is possible for tiny visual gaps
to appear between links if they are within
to preserve your code no matter how you format it—as opposed to html, which collapses all sequential space
characters down to a single space, with carriage returns counting as one space, unless content is wrapped in
tags—the cause for these gaps can be intensely frustrating to track down.
the issue lies not with the CSS, but with the html, in the form of carriage returns between each list item. While CSS
solutions to this problem exist (setting font-size: 0 on the parent element, for example, or floating the list item
elements), the best option is usually to remove the carriage returns, placing all of the list items in a single line, as
shown in listing 4-3.
Listing 4-3. An Accessible Site Navigation Code Structure Without Extra Spaces
for the sake of clarity I will not be using this solution in the code samples to come, but you should be aware of the
potential problem and its solution.
Regardless of whether or not they are written in a single line of code, navigational structures built with
ordered or unordered lists will display each link on a separate line. To create a horizontal navigation bar, you
must make one addition to your CSS.
Horizontal Navigation Bar Basics
Horizontal navigation interfaces are usually employed when a site is relatively small. (Drop-down menu bars,
which I will cover shortly, are an exception to this rule.)
“The magical number seven, plus or minus 2” is an effective rule of thumb to determine navigational
structure: on average, human beings can recall or relate to up to seven items at any one time. More than seven
items in your navigation usually means that you’ll need to reconsider the UI (user interface)—chunking or
grouping related items together usually solves the problem. Depending on screen width, you can also usually fit
seven navigational items horizontally in a navigational browser window; very narrow windows (as on a mobile
device) or more than seven primary links usually call for a vertically-oriented navigational format.