Web Design Discussion

CSS menus have much greater versatility than the traditional javascript-based menus placed in tables.

Here are some of the main benefits for CSS Menus:

1. Quickly create horizontal or vertical navigation menus without cluttering up your html code.

2. Fast loading. Search engines can spider the code faster than javascript or flash menus because it generates clean code.

3. Versatile. You have the capability to create horizontal, vertical and drop down navigation menus for any site. You also have the ability to create hover effects and use background images. This gives you alot of creativity in developing the best navigation menu for your web site.

4. Accessibility. A CSS-based navigation menu is accessible to all types of computer users no matter what type of browser, screen resolution or computer they use.

5. Flexibility. If you need to create multiple css menus, use css classes in your web page design.

Recently I had to convert an entire web site’s navigation from using applets (often created using the now defunct Front Page Editor) to a css menu. I had to use multiple css classes (instead of ids) to create multiple horizontal menus.

CSS Horizontal Menu Using Classes

Here’s how the css horizontal menu is displayed on a web page:
http://www.ihost-websites.com/test2.htm

CSS


.navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul.navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

<div class=”navcontainer”>
<ul class=”navlist”>
<li class=”active”><a href=”#” class=”current”>LINK1</a></li>
<li><a href=”#”>LINK2</a></li>
<li><a href=”#”>LINK3</a></li>
<li><a href=”#”>LINK4</a></li>
<li><a href=”#”>LINK5</a></li>
</ul>
</div>


Here is the same CSS horizontal menu using DIV IDS

CSS


#navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
–>
</style>


HTML


<div id="navcontainer">
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>LINK1</a></li>
<li><a href=”#”>LINK2</a></li>
<li><a href=”#”>LINK3</a></li>
<li><a href=”#”>LINK4</a></li>
<li><a href=”#”>LINK5</a></li>
</ul>
</div>


This entry was posted on Thursday, November 22nd, 2007 at 9:19 am and is filed under CSS, Web Design . 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.