Photograph of a Chaucer Astrolabe

Creating a series of web pages implies that you will create navigation to move between them. The form of this navigation depends on many factors, including site scope, user needs and viewport size.

Prerequisites: The to this point

Time: 2 hours

Core Material

CSS Properties & Principles

  1. Text Decoration Styling
  2. Limits on Styling Visited Links
  3. Introduction to Hierarchical Navigation
  4. Ligature Icon Fonts
  5. cursors

Navigational Patterns

  1. Simple Animated Menu Bar
  2. Vertical Navigation Bar
  3. Accordion Menu
  4. Drop-down Menu
  5. Tab Navigation
  6. Rock Band Navigation
  7. Angled Navigation
  8. Diamond Mesh Navigation
  9. Honeycomb Navigation w/ Random Highlights
  10. Stretchy Navigation
  11. Horizontal Reverse-Focus Navigation
  12. Center-Aligned Logo Navigation
  13. Previous-Next Navigation
  14. Porthole Profile Navigation
  15. Radial Pop-Out Social Media Navigation
  16. Window Toggle Events

Photograph by Viewminder, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at to learn more.