Tabbed Menus

Here are a couple of all-CSS tabbed menus from Stu Nicholls. If you want to see a lot of interesting CSS "inventions," visit Stu's CSS Play site. The first menu has the tabs facing down, and item #2 illustrates how you can indicate the current page.

The second menu has the tabs facing up:

item #1
item #2
item #3
item #4
item #5

You can see a working example of a tabbed menu here.

Here is the style sheet for the tabbed menus:

<style type="text/css">
#info {background:#eee;}
#navigation {background:transparent; margin:0 5em; height:3em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation li {display:block; float:left; margin:0 1px;}
.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}
.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}
a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}
a.menu:hover {background:transparent; cursor:pointer;}
a.menu:hover span {padding-top:10px; background:#888;}
a:menu:hover b {background:#888;}
.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}
.grey {background:#888;}
a:hover b.red {background:#888;}
a:hover b.orange {background:#888;}
a:hover b.yellow {background:#888;}
a:hover b.green {background:#888;}
a:hover b.blue {background:#888;}
a:hover b.indigo {background:#888;}
a:hover b.violet {background:#888;}
.active {padding-top:10px; background:#888; cursor:default;}
#navigation2 {background:transparent; margin:0 5em; height:3em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation2 li {display:block; float:left; margin:0 1px;}
.pad {display:block; height:1em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}
a.menu2:hover {background:transparent; cursor:pointer;}
a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}
a.menu2:hover .pad {height:0.2em;}
</style>

Here is the HTML code for the first menu:

<div id="navigation">
<ul>
<li>
<a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent red">item #1</span>
<b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent orange active">item #2</span>
<b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent yellow">item #3</span>
<b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent green">item #4</span>
<b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#nogo"><b class="snazzy"><span class="boxcontent blue">item #5</span>
<b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b>
</b></a>
</li>
</ul>
</div>

And here is the HTML code for the second menu:

<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">item #1</span>
</b></a>
</li>
<li>
<a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">item #2</span>
</b></a>
</li>
<li>
<a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">item #3</span>
</b></a>
</li>
<li>
<a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">item #4</span>
</b></a>
</li>
<li>
<a class="menu2" href="#nogo"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">item #5</span>
</b></a>
</li>
</ul>
</div>