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;
}
.navlist li
{
display: inline;
list-style-type: none;
}
.navlist a { padding: 3px 10px; }
.navlist a:link, .navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
.navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
-->
</style>
HTML
<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 li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#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>
Just came across your article, you may want to replace the; †with; ” on the ‘CSS Horizontal Menu Using Classes’ doesnt work if copy and pasted.
but drop down not working in your sample test.html file.
Geeks..it’s not meant to be a drop down only a horizontal css menu using classes.
Thanks for finally writing about >CSS Menus – Create a horizontal css menu using
classes <Liked it!
Thanks for your comment