Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## Lists as Horizontal Navigation

Key points:

- remove list styling
- change from "block" to "inline-block" (or "inline") display

Example 6.6 - simple list - Example 6.6

- Markup
- Display

    <ul>
    <li>Academics</li>
    <li>Tuition and Enrollment</li>
    <li>Resources and Policies</li>
    <li>Inside Extension</li>
    </ul>

- Academics
- Tuition and Enrollment
- Resources and Policies
- Inside Extension

Example 6.7 - inline list items - Example 6.7 (Without Styles)

- Markup
- Style
- Screenshot

    <ul id="extnav">
    <li>Academics</li>
    <li>Tuition and Enrollment</li>
    <li>Resources and Policies</li>
    <li>Inside Extension</li>
    </ul>

In `style` element (`<style type="text/css">`) within `head` element:

    ul#extnav {
      list-style: none;
    }
    ul#extnav li {
      display: inline-block;
    }

Note the labeling of the current area of the site the user is in with the "active" class.

Example 6.8 - Inline List Items - Example 6.8 (Without Styles)

- Markup
- Style
- Screenshot

    <ul id="extnav">
    <li><a href="#">Academics</a></li>
    <li class="active"><a href="#">Tuition and Enrollment</a></li>
    <li><a href="#">Resources and Policies</a></li>
    <li><a href="#">Inside Extension</a></li>
    </ul>

In `head` element:

    <link rel="stylesheet" type="text/css" href="example8.css"/>

In example8.css

    * {
      background-color: white;
    }

    ul#extnav {
      list-style: none;
      font-weight: bold;
      font-family: Arial, Verdana, Helvetica, sans-serif;
      color: #1e1e1e;
      background-color: white;
      margin-top: 1em;
    }

    ul#extnav li {
      display: inline-block;
      margin: 0;
      padding: 0;
    }

    ul#extnav a {
      padding: 0.5em;
      margin-right: 0;
      background-color: white;
      border-right: 1px solid black;
    }
    ul#extnav li:last-child a {
      border-style: none;
    }
    ul#extnav a:link,
    ul#extnav a:visited {
      color: black;
      text-decoration: none;
    }

    ul#extnav a:hover {
      color: #a51c30;
      text-decoration: underline;
    }
    ul#extnav .active {  background-color: #f5f5f8;}
    ul#extnav .active a:link,
    ul#extnav .active a:visited,
    ul#extnav .active a:hover,
    ul#extnav .active a:active {
      background-color: #f5f5f8;
      color: #a51c30;
      text-decoration: none;
    }

Copyright © David Heitmeyer