This tutorial will explain how to create a tabbed navigation using CSS.
Compatible with all major browsers.
To start with we need to create a simple layout with a list.
| <div id="Wrapper">
<div id="Navigation"> <ul id="primary"> <li><a href="/img_articles/12989/#">home</a></li> <li><a href="/img_articles/12989/#" class="active">services</a> <ul id="secondary"> <li><a href="/img_articles/12989/#">web design</a></li> <li><a href="/img_articles/12989/#">flash design</a></li> <li><a href="/img_articles/12989/#">content management</a></li> </ul> </li> <li><a href="/img_articles/12989/#">about us</a></li> <li><a href="/img_articles/12989/#">contact us</a></li> </ul> </div> <div id="Container"> <div id="Content"> </div> </div> </div> |
Now we take care of the main elements of the layout.
| html, body {
margin: 0px; padding: 0px; } body { text-align: center; } #Wrapper { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align: left; width: 765px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } #Container { background-color: #D0D2C1; color: #333; clear: both; margin: 0px; padding-top: 2.2em; padding-right: 0; padding-bottom: 0; padding-left: 0; width: 765px; float: left; border: 1px solid #C0C0C0; display: block; } #Content { background-color: #FFFFFF; border-top-width: 1px; border-top-style: solid; border-top-color: #C0C0C0; padding-top: 10px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin: 0px; width: auto; height: auto; } |
Next we will style our main menu container "Navigation"
| #Navigation {
margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; position: relative; height: 50px; display: block; width: auto; } |
Now we are going to style our top level list "primary".
| ul#primary {
margin: 0; padding: 0; position: absolute; bottom: -1px; width: 658px; } ul#primary li { display: inline; list-style: none; } ul#primary a,ul#primary a.active { width: 10em; display: block; float: left; text-align: center; font-family: tahoma, verdana, sans-serif; font-size: 11px; text-decoration: none; color: #333; letter-spacing: .1em; margin-top: 0px; margin-right: 2px; margin-bottom: 0; margin-left: 0; padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 0; } ul#primary a.active,ul#primary a.active:hover { border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: none; border-left: 1px solid #c0c0c0; background: #D0D2C1; color: #333; margin-top: 0; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; } ul#primary a { background: #e8e9e1; border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: none; border-left: 1px solid #c0c0c0; margin-top: 0px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; } ul#primary a:hover { margin-top: 1; border-color: #c0c0c0; background: #F1F1ED; color: #333; padding-bottom: 3px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-left: 0px; } |
Last thing we need to do is to style our second level list which will be our submenu "secondary".
| ul#secondary {
position: absolute; margin: 0; padding: 0; bottom: -1.6em; left: 1px; width: 100%; } ul#secondary li a { width: auto; display: block; float: left; padding: 0 10px; margin: 0; text-align: center; border-top: none; border-right: 1px dotted #c0c0c0; border-bottom: none; border-left: none; background: none; color: #666; background-color: #D0D2C1; text-decoration: none; } ul#secondary li a:hover { color: #333; background-color: #D0D2C1; border-top: none; border-right: 1px dotted #c0c0c0; border-bottom: none; border-left: none; margin: 0px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; } ul#secondary li a:active { color: #000; background-color: #D0D2C1; } ul#secondary li:last-child a { border: none; } |
And that’s all done!
Reply
Reply