CSS Navigation

Basics

  • use an unordered list as the basic html markup

  • apply pseudo classes for rollovers (see css stylesheet for more guidance)

  • set link style to display:block

  • Home
  • Resume
  • Writing
  • Web Design
  • Blog
  • About
  • Contact

Vertical 1:

  • uses an underline as the rollover cue

  • list-style-type:none - Removes the bullets. A navigation bar does not need list markers

  • Setting margins and padding to 0 to remove browser default settings

  • Home
  • Resume
  • Writing
  • Web Design
  • Blog
  • About
  • Contact

Vertical 2:

  • swaps background color as the rollover cue

 

  • Home
  • Resume
  • Writing
  • Web Design
  • Blog
  • About
  • Contact

Horizontal 1:

  • display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows you to specify the width

  • width:60px - Since block elements take up the full width available, they cannot float next to each other. We specify the width of the links to 60px

To see more sophisticated css navigation, visit the Listamatic website for more examples of how to create css navigation using lists.