The days of simple website designs seem to be truly over. Earlier an href link on a webpage should only be in blue color and underlined. When the link was hovered on by a mouse the color would change until it was clicked.
On being clicked the color of the link would be altogether different even as the link never remained without the underline. This meant that the link would be attributed with at least 3 colors in 3 conditions – when active (but not visited), when hovered on (but not yet clicked), and after being visited.
The reason I narrate this is because in the earlier days it was thought that the links must be clearly distinguished in body content, and further the visitor should also know whether a particular link had already been visited by him.
Today page-links are often hardly distinguishable from the rest of the content even as you see the webpage designs having undergone a huge transformation from what they used to be a few years back.
Yet, for all those changes, pronounced and not-so-pronounced, the need of navigation menu bar – mostly the horizontal type – has never been questioned.
On the contrary, the designers are according special preference to horizontal navigation menus by evolving new attractive designs that are both practical and soothing to eyes. Here see some of the latest trends and patterns of horizontal navigation menus in vogue.
In this demonstrative video-based article, let us look at how with simple CSS techniques you can make 5 attractive horizontal navigation menus.
First, have a look at the 5 horizontal menus below sourced from maxdesign. Hover mouse on the links and see how they change in appearance.
1) Simple Mouseover Navbar
2) Tabbed Navbar 1
3) Simple Bits Tabbed Navbar
4) Seth’s Horizontal List
5) Horizontal List 2
Video Tutorial
The following video tutorial explains the steps.
The Codes
While the actual html code (between the opening and closing body tags) is the same for all of them, the styles are of course different. For the first horizontal navigation menu – the Simple Mouseover Navbar – the full html code is as under:
<html><head>
<style>
/*
Type: Simple MouseOver Navbar
Author: Eric Meyer
Source: http://css.maxdesign.com.au/listamatic/horizontal04.htm
*/
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0 2px 0 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #F99;
background: #FCC;
text-decoration: none;
}
#navlist li a:link { color: #C00; }
#navlist li a:visited { color: #606; }
#navlist li a:hover
{
border-color: #FCC;
color: #FFF;
background: #F99;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</body>
</html>
In the above html code, only the CSS code within the <style> and </style> tags in the head section changes for the remaining 4 horizontal navigation menus. They are given below.
Take a look at the highlighted ‘unordered list’ portion in the above html code (scroll down to view). The id values of ‘current’ and ‘active’ may not be relevant for the first horizontal navigation menu.
For all the remaining 4 menus the id values are relevant, and you have to manually alter them to reflect the particular page where the corresponding tab will be shown as ‘current’.
CSS for 2) Tabbed Navbar 1
#navlist
{
width:330px;
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #088;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #088;
border-bottom: none;
background: #DDC;
text-decoration: none;
}
#navlist li a:link { color: #044; }
#navlist li a:visited { color: #066; }
#navlist li a:hover
{
color: #000;
background: #CCB;
border-color: #022;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
CSS for 3) Simple Bits Tabbed Navbar
#navlist
{
width:350px;
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #135;
font: bold 13px Verdana, sans-serif;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #678;
}
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 3px solid #789;
padding-bottom: 3px;
background: transparent;
color: #345;
}
#navlist a:hover { color: #345; }
CSS for 4) Seth’s Horizontal List
body {margin-top:10px;}
#navcontainer
{
width:400px;
border-top: 1px solid #999;
z-index: 1;
font: bold 13px Verdana, sans-serif;
}
#navcontainer ul
{
list-style-type: none;
margin-top: -8px;
padding: 0;
position: relative;
z-index: 2;
}
#navcontainer li
{
display: inline;
margin: 0 5px;
}
#navcontainer li a
{
padding: 1px 7px;
color: #777;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
}
#navcontainer li a:hover
{
color: #000;
border: 1px solid #555;
border-top: 2px solid #555;
border-bottom: 2px solid #555;
}
#navcontainer li a#current
{
color: #000;
border: 1px solid #555;
border-top: 2px solid #555;
border-bottom: 2px solid #555;
}
CSS for 5) Horizontal List 2
#navcontainer
{
width:550px;
background: #f0e7d7;
margin: 0;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
}
/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}
ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 98%;
font-size: 0.8em;
}
ul#navlist li
{
display: block;
float: left;
width: 20%;
margin: 0;
padding: 0;
}
ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
} This article of September 27th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
