Pro CSS3 Animation

(Tuis.) #1

ChApteR 4 ■ CSS3 tRAnSItIonS foR UI elementS


  • Contact Us / Help


    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
  • elements arranged horizontally (as in listing 4-3). While intended

  • 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.

  • Free download pdf