The air that I breathe... and CSS
Site navigation menus have become continually more colorful and interactive... and complicated.
What many don't realise is that you can create a light-weight navigation menu with CSS alone.
Tab navigation
All the samples below use the following HTML structure, and differ only in the class of the <ul> tag.
The active tab is indicated by class="active". Note the hover effect.
<ul class="horiz-nav">
<li><a href="javascript: void(0);">Section 1</a></li>
<li class="active"><a href="javascript: void(0);">Section 2</a></li>
<li><a href="javascript: void(0);">Section 3</a></li>
</ul>Examples
Horizontal tabs
The trick here is to use the <ul> tag's lower border as the horizontal base line, padding it so that it overlaps with the bottom border of the tabs.
We style the <a> tag to create the tabs.
ul.horiz-nav {
display: block;
list-style-type: none;
padding-bottom: 19px;
border-bottom: 1px solid black;
margin-right: 200px;
clear:both;
}
ul.horiz-nav li{
float:left;
}
ul.horiz-nav li a,
ul.horiz-nav li a:visited {
display: block;
color: black;
background-color:white;
margin-left: 10px;
padding: 2px 2px 2px 2px;
text-decoration: none;
border: 1px solid black;
}
ul.horiz-nav li.active a,
ul.horiz-nav li.active a:hover,
ul.horiz-nav li.active a:visited,
ul.horiz-nav li a:hover {
display: block;
color: white;
background-color: Black;
border-bottom: 1px solid Black;
}Here we run into browser inconsistencies when trying to use the <ul> tag as a vertical border. We compensate for this by using a background color instead.
ul.verti-nav {
display: block;
width: 100px;
background-color: Silver;
list-style-type: none;
padding-top: 19px;
padding-bottom: 40px;
}
ul.verti-nav li{
width: 100px;
margin-bottom: 6px;
}
ul.verti-nav li a,
ul.verti-nav li a:visited {
display: block;
height: 20px;
color: white;
background-color: navy;
margin-left: 10px;
padding: 2px 2px 2px 2px;
text-decoration: none;
border-right: 1px solid navy;
}
ul.verti-nav li.active a,
ul.verti-nav li.active a:hover,
ul.verti-nav li.active a:visited,
ul.verti-nav li a:hover {
display: block;
color: black;
background-color: white;
border-right: 1px solid white;
}
It is also possible to create dynamic menus using CSS alone, instead of unwieldy Javascript code.
I hope to explore this in a later article.
For related Javascript effects, such as corner rounding and an "accordion" style menu, see references below.