Colored Tabs
Here is all of the code for my Colored Tabs Menu. I provide the complete CSS and the HTML implementation.
This code was loosely based on Eric Meyer's Tabbed NavBar; available from: http://css.maxdesign.com.au/listamatic/horizontal05.htm
How it looks:
See the Tabs at the top of this page.
The CSS used:
#navlist
{
padding: 1px 0 0 0;
margin-left: 0;
}
#navlist li
{
list-style: none;
margin: 0;
padding:0;
display: inline;
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 12px;
}
#navlist li a
{
padding: 1px 2px 0 2px;
margin-left: 2px;
border: 1px solid #777788;
text-decoration: none;
}
#navlist li a:link { color: #000000; }
#navlist li a:visited { color: #000000; }
/* ---------- home ---------- */
#navlist li a#home
{
background: #ffffff;
}
#navlist li a:hover#home
{
color: #ffffff;
background: #000000;/* Tab color */
}
/* ---------- redtab ---------- */
#navlist li a#redtab
{
background: #ff3333;
}
#navlist li a:hover#redtab
{
color: #000000;
background: #cc0000;/* Tab color */
}
/* ---------- lilactab ---------- */
#navlist li a#lilactab
{
background: #ccccff;
}
#navlist li a:hover#lilactab
{
color: #000000;
background: #cc66ff;/* Tab color */
}
/* ---------- purpletab ---------- */
#navlist li a#purpletab
{
background: #9966ff;
}
#navlist li a:hover#purpletab
{
color: #000000;
background: #9900cc;/* Tab color */
}
/* ---------- bluetab ---------- */
#navlist li a#bluetab
{
background: #ccffff;
}
#navlist li a:hover#bluetab
{
color: #000000;
background: #00ccff;/* Tab color */
}
/* ---------- dkbluetab ---------- */
#navlist li a#dkbluetab
{
background: #3399ff;
}
#navlist li a:hover#dkbluetab
{
color: #000000;
background: #0000ff;/* Tab color */
}
/* ---------- greentab ---------- */
#navlist li a#greentab
{
background: #99ff66;
}
#navlist li a:hover#greentab
{
color: #000000;
background: #00cc33;/* Tab color */
}
/* ---------- dkgreentab ---------- */
#navlist li a#dkgreentab
{
background: #009933;
}
#navlist li a:hover#dkgreentab
{
color: #000000;
background: #336600;/* Tab color */
}
/* ---------- orangetab ---------- */
#navlist li a#orangetab
{
background: #ffcc33;
}
#navlist li a:hover#orangetab
{
color: #000000;
background: #ff6600;/* Tab color */
}
/* ---------- yellowtab ---------- */
#navlist li a#yellowtab
{
background: #ffff99;
}
#navlist li a:hover#yellowtab
{
color: #000000;
background: #ffff00;/* Tab color */
}
/* ---------- pinktab ---------- */
#navlist li a#pinktab
{
background: #ffccff;
}
#navlist li a:hover#pinktab
{
color: #000000;
background: #ff33cc;/* Tab color */
}
/* ---------- greytab ---------- */
#navlist li a#greytab
{
background: #cccccc;
}
#navlist li a:hover#greytab
{
color: #000000;
background: #999999;/* Tab color */
}
/* ---------- blacktab ---------- */
#navlist li a#blacktab
{
background: #000000;
color: #ffffff;
}
#navlist li a:hover#blacktab
{
color: #000000;
background: #ffffff;/* Tab color */
}
/* ---------- maptab ---------- */
#navlist li a#maptab
{
background: #ffffff;
color: #000000;
}
#navlist li a:hover#maptab
{
color: #ff0000;
background: #ffffff;/* Tab color */
}
The HTML used:
Note: I have cut the HTML down to the minimum required. If you look at the original in the the source of this page, you will find the "tabindex" "title" "target" and "id" attributes in use.
<ul id="navlist">
<li style="margin-left:1px">
<a href="">Home</a></li>
<li><a href="" >CSS</a></li>
<li><a href="">HTML</a></li>
<li><a href="">PHP/SQL</a></li>
<li><a href=""># Colors</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Domains</a></li>
<li><a href="">Verse</a></li>
<li><a href="">Fiction</a></li>
<li><a href="">Non-fiction</a></li>
<li><a href="">Pulse</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Links</a></li>
<li><a href="">Sitemap</a></li>
</ul>