Tabbed Navigation

Contact Us or call 1-877-932-8228
Tabbed Navigation

Tabbed Navigation

The screenshot below shows an example of a page that uses tabbed navigation: Page Using Tabbed Navigation

To create the navigation bar, we combine some of the techniques we have learned thus far. Let's start by looking at the code:

Code Sample:

CssBackgroundTricks/Demos/tabbedMenus.html
---- C O D E   O M I T T E D ----
<style type="text/css">
#wrapper {
	width:846px;
	margin:10px auto;
}
#content {
	clear:both;
	width:838px;
	background-color:#eee;
	border:4px solid #000808;
}
p {
	margin:5px;
	padding:5px;
}
#mainMenu {
	width:846px;
	font-family: "Trebuchet MS";
}
#mainMenu li {
	display:block;
	width:120px;
	float:left;
	margin-left:1px;
}
#mainMenu li:first-child, #mainMenu li.first {
	margin-left:0px;
}
#mainMenu a {
	display:block;
	padding:10px;
	text-decoration:none;
	background:transparent url(Images/link.gif) repeat-x;
	color:#fff;
	text-align:center;
}
#mainMenu a:hover {
	background:transparent url(Images/hover.gif) repeat-x;
	color:#333;
}
#mainMenu a:active {
	background:transparent url(Images/active.gif) repeat-x;
	color:#fff;
}
</style>
<title>CSS Menu</title>
</head>
<body>
<div id="wrapper">
	<ul id="mainMenu">
		<li class="first"><a href="home.html">Home</a></li>
		<li><a href="services.html">Services</a></li>
		<li><a href="products.html">Products</a></li>
		<li><a href="support.html">Support</a></li>
		<li><a href="blog.html">Blog</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
	</ul>
	<div id="content">
---- C O D E   O M I T T E D ----
</div>
</div>
</body>
</html>

Code Explanation

This code should be pretty straightforward. It simply combines the list navigation techniques you learned in CSS Lists as Hierarchical Navigation with the background image techniques we've learned here.

Open the page in your browser to see the three states of the menu items. The magnified background images used are shown below: Magnified Background Images

Each image is 6 pixels wide by 37 pixels high.

Next