A navigation bar styled purely with CSS is easier to modify and reuse than one dependent on image files or JavaScript.
Pure CSS Navigation Bar
HTML for a navigation bar (a flat menu bar also called a nav bar or link bar) should contain just the list of buttons with their respective links.
<ul class=navigation-bar>
<li><a href="#a">Alligator</a></li>
<li><a href="#b">Bullfrog</a></li>
<li class=current><a href="#c">Cheetah</a></li>
<li><a href="#d">Dolphin</a></li>
</ul>
Example Navigation Bar HTML
Pure CSS Navigation Bar uses CSS to layout the buttons horizontally by disabling
list-style-type and displaying the list items as
table-cell elements.
ul.navigation-bar {
list-style-type: none;
background-image: -webkit-linear-gradient(top, silver, midnightblue);
background-image: -moz-linear-gradient(top, silver, midnightblue);
background-image: -ms-linear-gradient(top, silver, midnightblue);
background-image: linear-gradient(top, silver, midnightblue);
border: 2px solid dimgray;
padding: 0px;
margin: 0px;
background-color: midnightblue; /* IE6...IE9 */
*line-height: 3.2em; /* IE6,IE7 */
}
ul.navigation-bar li {
display: table-cell;
*display: inline; /* IE6,IE7 */
}
ul.navigation-bar li.current, ul.navigation-bar li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
ul.navigation-bar li a {
display: table-cell;
text-decoration: none;
outline: none;
font-size: 120%;
color: white;
border-right: 2px solid dimgray;
padding: 15px 25px; /* sets button size */
}
Pure CSS Navigation Bar
Try it out:
The
color for the navigation bar in the example screenshot is
midnightblue. Other professional looking colors for the navigation bar include
firebrick, seagreen, sienna, darkslategray, and
dimgray.
Pure CSS Navigation Bar will work on sites that
validate to strict HTML or HTML5. And it follows a progressive enhancement strategy in that the navigation bar will display and function correctly for most all web browsers while providing improved visual effects for standards compliant web browsers.
