CSS - Colored Navigation Tabs
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: CSS
Navigation tabs are fun, they help show you were you are. This is some CSS which renders some fairly simple but nice tabs with rounded edges. You would have to add some JavaScript to detect what page you are on to dynamically change the tabs from "off" to "current".
Here's the code:
<!doctype html>
<html lang="en">
<head>
<title>Colored Navigation Tabs</title>
<style>
ul.tabs {
list-style:none;
margin:1em;
height:22px; /* Increase to separate line at bottom */
padding-top:0px;
padding-bottom:5px;
border-bottom:4px solid #6666FF; /* Line at bottom (blue) */
}
ul.tabs li {
font-family: "Roboto", arial, sans-serif;
font-size: 12px;
display:inline;
width:300px;
height:20px;
padding:10px;
margin:0px;
text-align:center;
border-top-left-radius:.5em;
border-top-right-radius:.5em;
}
ul.tabs a:link {text-decoration:none; color:#000000}
ul.tabs a:visited {text-decoration:none; color:#000000}
#menu #current {background-color:#6666FF} /* Selected tab (blue) */
#menu #off {background-color:silver} /* Non-selected tab (grey) */
</style>
</head>
<body>
<ul id="menu" class="tabs">
<li id="current"><a href="page1.html">Page 1</a></li>
<li id="off"><a href="page2.html">Page 2</a></li>
<li id="off"><a href="page3.html">Page 3</a></li>
<li id="off"><a href="page4.html">Page 4</a></li>
</ul>
</body>
</html>