Web Design Discussion

Most web sites these days use some type of rollover navigation structure. When the mouse is passed across the link it changes colors. This is usually achieved with a lot of javascript code which clutters your web pages making them slow loading and not very search engine friendly.

A great alternative is to use a css list for the vertical navigation or a css nested list if you require something more complex.
I use the css list if I have a number of categories that need to be divided into subcategories.

Benefits of a CSS Listed List

1. Fast loading

2. Search engine friendly

3. Less code required than javascript rollovers.

4. Easy to implement

5. Easy to modify

Here is the code for a CSS nested list I used for one of my client’s sites.

CSS

.navlist{
margin-left: 0px;
padding-left: 0px;
list-style:none;}
.navlist li
{
padding-left: 5px;
}
.navlist ul {list-style:none;}
ul li {
list-style:circle;
color: #FFFFFF;
font-weight: bold;
}
ul li a{
color: #FFFFFF;
font-weight: bold;
text-decoration:none;
}
ul li a:hover{
text-decoration: underline;
}

XHTML


<ul class="navlist">
  <li class=”active”><a href=”#” class=”current”>Home</a></li>
  <li>History
    <ul class=”subnavlist”>
      <li class=”subactive”><a href=”#” class=”subcurrent”>What We Believe</a></li>
      <li><a href=”#”>Pastors Marc & Nanette</a></li>
      <li><a href=”#”>Contact Us</a></li>
    </ul>
  </li>
  <li>Ministries
    <ul class=”subnavlist”>
      <li class=”subactive”><a href=”#”>Children’s Ministry</a></li>
      <li><a href=”#”>Men’s Ministry</a> </li>
      <li><a href=”#”>Music Ministry</a></li>
      <li><a href=”#”>Prison Ministry</a></li>
      <li><a href=”#”>TV Ministry</a></li>
      <li><a href=”#”>Women’s Ministry</a></li>
      <li><a href=”#”>Youth Ministry</a></li>
    </ul>
  </li>
  <li><a href=”#”>Bookstore Online</a></li>
  <li><a href=”#”>Study Resources</a></li>
  <li><a href=”#”>Service Information</a></li>
  <li><a href=”#”>TV Broadcast</a></li>
  <li><a href=”#”>Donations</a></li>
</ul>


Resources

http://css.maxdesign.com.au/listutorial/sub01.htm
http://css.maxdesign.com.au/listamatic2/
http://codex.wordpress.org/Styling_Lists_with_CSS

This entry was posted on Tuesday, May 30th, 2006 at 3:35 pm and is filed under CSS . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.