CSS+List=Easy Navigation

Have you ever gone to a website to find a specific information that you know is on that site, but was unsuccessful or took a very long time to find it due to poor site navigation? It's quite the shame when a website has a lot of useful information on it but has poor usability due to its navigation. Have designers forgotten that a successful website requires a good navigation menu?

Navigation menus are not that hard to make as one may think. One good and easy approach that I've found is to use a list. Yes, all you need to use is a plain old unordered list and a bit of CSS to make a simple yet effective navigation menu. You can even make advance menus such as multi-layer and drop-down menus using nested lists.

Using the simple HTML unordered list below:

<ul> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">Resources</a> 
    <ul> 
      <li><a href="#">Dorm Energy</a></li> 
      <li><a href="#">Energy Hub</a></li> 
      <li><a href="#">Have Fun</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Energy Data</a> 
    <ul> 
      <li><a href="#">Real-Time</a></li> 
      <li><a href="#">Hour</a></li> 
      <li><a href="#">Day</a></li> 
      <li><a href="#">Week</a></li> 
      <li><a href="#">Month</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Billboard</a></li> 
  <li><a href="#">About</a></li> 
</ul>

you can create a horizontal or vertical navigation menu with some simple tweaks on the CSS scripts. This is called the "Suckerfish Drop-downs".





Rather than me explaining how this works, you can check out the original post on creating a Suckerfish Dropdowns. This post takes you step-by-step explaining what each step does. Any beginners can easily follow these steps to create their very own navigation menu.

So there you have it folks. There is absolutely no excuse for having poor navigation on any website.