Navigation on web pages is a form of list, and tabbed navigation is like a horizontal list. It's fairly easy to create horizontal tabbed navigation with CSS, but CSS 3 gives us a few more tools to make them look even nicer.
This code tutorial will take you through the HTML and CSS needed to create a CSS tabbed menu.
<!DOCTYPE html>
<html>
<head>
<style>
.tablist {
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
.tablist li {
float:left;
margin-right:0.13em;
}
.tablist li a {
display:block;
padding:0 1em;
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color:#ccc;
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
.tablist li a:hover {
background:#3cf;
color:#fff;
text-decoration:none;
}
.tablist li#current a {
background-color: #777;
color: #fff;
}
.tablist li#current a:hover {
background: #39C;
}
</style>
</head>
<body>
<nav>
<ul class="tablist">
<li><a href="#">CSS 3</a></li>
<li id="current"><a href="#">Tabs</a></li>
<li><a href="#">For</a></li>
<li><a href="#">Menus</a></li>
</ul>
</nav>
</body>
</html>
No comments:
Post a Comment