Using lists to make menus

Lists are the basis for navigation and menus and come in three styles: unordered, ordered and definition. It is the unordered form that we manipulate with CSS to create menus.

We will use an unordered list to create the main menu in our website, which will run  horizontally across the header.

Link states

There are four basic states that we can create when thinking our link styles. In the CSS, they must appear in this order. You do not need to specify all four, but you should specify one and two.

  1. a:link: is the state of the default link
  2. a:visited: is the state when you have previously viewed that link’s page
  3. a:hover: is the state of the rollover effect for that link
  4. a:active: is the state of the link when it is being clicked

Changing a block item so it appears inline

We want our menu links to appear in a single-file horizontal row. And we want to remove the bullets. To do that, we have to use CSS.

There are two ways that we can create a horizontal navigation bar: we can force the list items to display inline or we can make them float.

Two videos from are key: a review of the box model and introduction of float and display

We’re going to use the W3C tutorial on creating a horizontal navigation bar using CSS. It is composed of two parts: the CSS and the unordered list from above. The result will look something like this.

  1. Open your HTML template in Brackets and save it as demo-index-5.html
  2. Paste the stylesheet inside the HEAD tags
  3. Create a new external style sheet (class-5.css) and reference it in the HEAD.
  4. Paste the new body copy.
  5. Upload the CSS file into the scripts directory.
  6. Upload the HTML file at “root”! The URLS should look something like this:

This is the CSS we are placing in the HEAD of our new HTML document, demo-index-5.html

We need a new external style sheet, class-5.css.

Remember, we upload it to the scripts folder and reference this in the HTML document head.

And we have revised copy in the body of our document.