Commercial sites need nice clean menu systems that don’t confuse visitors at all. You really do not want to mess around with flashy graphic intensive menus on a site that relies on landing pages being visited to sell products or services. Make it easy for visitors to sift from one page to another. The use of attractive text menus is sufficient.
Here is the CSS menu we shall create:
This is a very easy style to implement as we can change the colors, fonts and size very quickly and easily. Plus, you can integrate the menu anywhere on your web site. Loading time for the menu as it uses CSS and text is fast. If you wish to add menus, this is a very easy customization to apply.
Now, let us work through the code. For most of my tutorials, I assume at least a basic grasp on HTML and CSS. Please comment if further explanation is needed.
Ok, first the header:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Underline Menu Model</title>
This is for those whom use notepad. Others whom use software like Dreamweaver will see this automatically generated. Now, the styles with comments to explain the code:
<style>
.bottomstrip{
font-weight: bold;
width: 100%;
}
.bottomstrip ul{
padding: 15px 0 8px 0; /* Specify the top position.. Increasing the px will result in changing the menu from the top position*/
margin: 0;
text-align: center; /* we can change the left,right,center to align the menu position */
}
.bottomstrip ul li{
display: inline;
}
.bottomstrip ul li a{
color: #003366; /* specify the Anchor text color */
padding: 12px 5px 5px 5px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none; /* This is for removing the underline of the anchor tag */
border-bottom: 10px solid lightblue; /*bottom border is 10px: height of the bottom strip*/
}
.bottomstrip ul li a:hover, .bottomstrip ul li a.selected {border-bottom-color: #D12000; /* On mouse over change the color of the bottom strip */
color:#D12000;/* On mouse over change the color of the font */
}
</style>
</head>
Now to display the page:
<body>
<div class="bottomstrip">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What We Do</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Simply replace the hashes with the URL of the page. You can see how easy it is to add menus to the bar. Top navbar styles in this way are quite popular and they suit the clean code style required by commercial sites today.
so whats the point of a tutorial if you do not have a demo to go along with it?