CSS - Colored Navigation Tabs

From NoskeWiki
Jump to: navigation, search
Colored navigation tabs

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".


Colored Navigation Tabs

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>