Pam Van Londen, Corvallis Artist, Oregon Artist. Creating Every Day…paintings, web sites, and courses Oregon daily painter, murals and portraits. Corvallis Web Designer / Web Developer. Original abstract landscape oil paintings

Adding Style to Navigation Lists

Posted in Design and Knowledge Base and Production 2 years, 9 months ago at 12:23 pm

CSS pseudo-classes

Notice the menus in this page have a pseudo-class applied to them for the link, visited, hover, and active, colors. For the site with no need for fancy menus, these pseudo-class changes in the style sheet can make tagging your pages fast.

Where “a” is a link tag, “a:hover” is a pseudo class, which can have a different look for each type of navigation on your page. The footers at the bottom of this page have a “a.footer:hover” pseudo class applied, which works because a class called “.footer” is defined.

When list items are used to create menus, stylesheet definitions can easily transform them to vertical or horizontal bars with tabs, borders, and rollover effects. Examples:

This code:

<nav>
     <ul class="toolbar">
       <li><a href="#" title="one">one</a></li>

       <li><a href="#" title="two">two</a></li>
       <li><a href="#" title="three">three</a></li>

     </ul>
</nav>

…and this style sheet:


ul.toolbar {
  margin:0; padding:0; text-align:left;
}

ul.toolbar li {
  margin:0; padding:0; display:inline; list-style-type:none; font-size:12px;
}

ul.toolbar li a {
  margin:0; padding:10px; text-decoration:none; color:#6600CC;
  border: 1px solid #6600cc;
}

ul.toolbar li a:hover {
  margin:0; padding:10px; text-decoration:underline; color:#fff;
  background-color:#6600CC;
}

…give you a menu that looks like this (roll over the menu items to see them change):

 

Additional Resources