Page Navigation

• Finding the way around a site can be challenging without guidance
• There are tools which can help the end user locate parts of the site

Anchors aweigh!

• Navigation relies on Anchors (aka <a> tags)

Internal Navigation Example

External Navigation Example

Navigation Bars

• Common component of web pages
• Shape the way users think about the site
• Several ways to build them
• Flexbox makes building these much easier

Navigation Bars Example - Floats

See the Pen topnav-example by Joshua Burke (@Dangeranger) on CodePen.

Navigation Bars Example - List

Better Nav Bar Example

Navigation Bars Example Complete

Follow the link to see a fairly complete navigation bar with internally linked content that includes:

• Full-width nav bar
• Fixed postion on scroll
• Hover state style change
• Borders around all items

New CSS

#nav {
  position: fixed;
  width: 100%;
}

#nav li:first-child {
  border-left: 1px solid #ccc;
}

#nav li a:hover {
  color: #40f;
  background-color: #fff;
}

.section {
  margin-top: 3em;
}

Complete Example HTML

Navigation Bars Example Flexbox

• Flexbox can make laying out a responsive navigation bar much easier

Example Flexbox Navigation

 Previous

Outline