Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## 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 | <ul><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul>

- 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) | <ul id="extnav"><li>Academics</li><li>Tuition and Enrollment</li><li>Resources and Policies</li><li>Inside Extension</li></ul>ul#extnav { list-style: none; } ul#extnav li { display: inline-block; }

- 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) | <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>* { 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; }

- 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