lab4setup

Pasted content

.

Navigation menus on web pages are made with unordered lists. The technique for creating a simple menu is described in this section.

Preview of the end result

You will create a simple single-level menu that looks similar to the following:

menu02

.

Start by creating a list

This lab’s original.html includes the list items near the top of the document:

<nav>
  <ul>
    <li><a href=home.html>Home</a></li>
    <li><a href=aboutus.html>About us</a></li>
    <li><a href=curriculum.html>Curriculum</a></li>
    <li><a href=admissions.html>Admissions</a></li>
    <li><a href=careers.html>Careers</a></li>
    <li><a href=contact.html>Contact us</a></li>
  </ul>
</nav>

Notice that the ul is inside (a descendant) of nav. If this was the only nav element on the page, it would not need an id attribute. However, on complex pages – where you offer both site-wide navigation and contextual or page navigation, it would need an id attribute.

.

Think about the default (built-in) CSS rules for a list

The default, or built-in CSS rules for a list makes it appear as follows:

menu01

As you can see, the hyperlinks are rendered as a vertical list (each list item is on its own line), indented, with bullets, and the text is blue and underlined.

Therefore, we want to change all that.

You must be careful – and specific – when naming your selectors. For example, the above list is unambiguously selected with the ‘nav ul’ selector. Its list items are unambiguously selected with the ‘nav ul li’ selector. If you get sloppy and don’t include the ‘nav’ part of the selector, your rules will affect other lists on the web page.

.

Remove the indented bulleted list formatting

By default, an unordered list is indented from the left, and has bullets. It also has a top and bottom margin. Remove all that:

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Try this now, and view the result.

Links to reference material: nav ul margin padding list-style-type

.

Configure the list items to a horizontal configuration

By default, a list’s items are in a vertical orientation. Also, each is as wide as its content. Change to horizontal, and make all items the same width:

nav ul li {
  float: left;
  width: 16.66%;
}

Try this now, and view the result.

Links to reference material: li float width

.

Configure the hyperlinks, step 1 (structure and positioning)

Add rules to set the structure of each hyperlink, and its positioning. Ideally, we want a bit of padding between the content and its edges, and some margin to separate the hyperlinks.

nav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  margin: 0em 0.2em;
  cursor: default;
}

Try this now, and view the result.

Notes:

  • we want ‘display: block;’, to enable the user to click anywhere on the list item’s width, and not just the hyperlink’s content
  • padding and margin values are in em units, to survive a user changing their browser’s zoom level
  • by default, the cursor changes to a hand+finger pointer over top of a hyperlink, so we change that behaviour

Links to reference material: a display cursor

.

Configure the hyperlinks, step 2 (fine-tune their appearance)

Add some more rules to improve the menu’s appearance. Please note that the fonts colours are examples only, so your finished professional-looking page will probably use better choices.

In the code below for the ‘nav ul li a’ selector, the first four rules we added in ‘step 1’ above are at the top, and the new rules for that selector follow.

nav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  margin: 0em 0.2em;
  cursor: default;
  background-color: yellow;
  text-decoration: none;
  font-family: arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 0.1em;
}

nav ul li a:link { color: black; }

nav ul li a:visited { color: black; }

nav ul li a:hover {
 background-color: aqua;
 color: black;
}

nav ul li a:active {
 background-color: pink;
 color: black;
}

Try this now, and view the result.

Links to reference material: background-color text-decoration font-family font-weight font-size letter-spacing color

.

Later in this course, you will learn how to create a multi-level menu.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: