X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Dreamweaver CS5: Building a Navigation Menu from a List

When building a best-practice website, you should build your navigation menus using lists if possible. They’re semantically accurate (a menu is a list, after all) and CSS makes them easy to style. Let’s take a look at how a navigation list works under the hood. I’ll be using Dreamweaver in Code View, but feel free to follow along with a straight text editor if you wish.

Step 1 - Build a list

This part is easy: Create a new HTML file, no template, and simply type the items in your menu. Enclose each list item with <li> and </li>, and the entire list with <ul> and </ul>.

You should end up with something like this: 

<ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

However, you want to make sure each item links to something — it will become important as we build the CSS. So, add links to the “#” character, to create something like this:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Step 2 - Link to an external CSS file

In the CSS panel, press the New CSS Rule button at the bottom of the panel (the document with the plus symbol). Create an ID style with the name “navlist” and choose to create a New Style Sheet File. In the dialog that appears, name the file “style.css”. It’s always best to use an external style sheet, even when experimenting.

We don’t need to define anything using the dialog that appears next, so just press OK. You’ll have created a style sheet with a basic, blank style definition. View it by clicking on “style.css” just above your document, next to the highlighted words “Source Code”.

Step 3 - Add some basic CSS rules

We need to specify that the list has the ID “navlist” so that we can target it. In the HTML, add id=”navlist” to the <ul> tag.

Now we can get going on the CSS. You’ll probably want to adjust background-color, width, borders and margins to get started, and you’ll want to think about how you build the CSS selectors. If you use #navlist li, you’ll access the list item in the navigation list. Even better, target #navlist li a to target the links within your list. Adding padding to them makes a bigger target, while adding padding to a list item would not. Try:

#navlist {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

}

#navlist li {

margin: 5px;

}

#navlist li a {

background-color: #222;

color: #eee;

padding: 10px;

text-decoration: none;

display: block;

}


• The  #navlist rule removes the bullets, margins and padding, and sets width. 

• The #navlist li rule adds a little space between the list items

• Finally, the  #navlist li a  rule sets colors, padding, removes the underlines, and (importantly) makes each list item appear as a block. Removing underlines should only be done if it’s obvious that the item is a link—use with caution.

Step 4 - Add some hover CSS rules

To make the list more reactive, add a hover rule:

#navlist li a:hover {

background-color: #444;

color: #ee2;

}

Step 5 - Marking the active page

It’s common in these kinds of pages to mark the active page with a movable class style, for example class=”active”, which is placed on the current page. However, this means that the menu block is different on each page. It’s more convenient to tag each link in the HTML with a different class, then add a page-specific class to the the body tag, and catch them all with a single CSS rule. Something like this:

<body id="bodypage1">

<ul id="navlist">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

  <li class="page3"><a href="#">Support</a></li>

  <li class="page4"><a href="#">Team</a></li>

  <li class="page5"><a href="#">Contact Us</a></li>

</ul>

The matching CSS:

#bodypage1 .page1 a, #bodypage2 .page2 a, #bodypage3 .page3 a, #bodypage4 .page4 a, #bodypage5 .page5 a{

background-color: #555;

color: #ee2;

}

This way, you only need to change the class on the body tag on each page. Sneaky, but it works.

There are many, many more tricks, but that’s all for now. As you may have seen in the Exploring CSS video tutorial, to make the list horizontal, all you need is display: inline applied to the li element, so explore that if you wish. Next time, we’ll look at some more exotic options.

finished-product.png

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2017 macProVideo.com
a division of NonLinear Educating Inc.
Link