This is simple bit of coding that will give your menu that little bit extra without using flash.

Tabs demo

View Demo

So this is how it works, first of all there is a container (in this demo I’ve named it #menuCont) which the ul sit within. Put a border on the bottom edge of this div to acts as the top of the #content box. The height of #menuCont positions the #content relative to the tabs allowing the active tab to overlap and make the content and tab one.

Next float the li’s. The top padding of the each li positions how high the anchor is above the content and the padding on the anchor is used to fill the gap between li and content.

Now all you need is the jQuery. Basically all it does is animate the top padding of the li and the bottom padding of the anchor.

The html:

<div id="wrapper">
<div id="menuCont">
<ul id="tabs">
<li class="active"><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
<li><a href="#">item5</a></li>
</ul>
</div>
<div id="content">
<p>The content goes here</p>
</div>
</div>

The CSS:

a, li{
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
div#wrapper{
width:900px;
margin:0 auto;
}
div#content{
padding:25px;
border:1px solid #999999;
border-top:none;
}
div#menuCont{
text-align:right;
border-bottom:1px solid #999999;
height:59px;
}
ul#tabs{
padding:25px 25px 0;
margin:0;
}
ul#tabs li{
float:left;
padding:10px 0 4px;
margin:0 1px;
list-style:none;
background:#EFEFEF;
}
ul#tabs li.active{
padding-top:0;
}
ul#tabs li a{
background:#EFEFEF;
padding:10px 20px 5px;
text-decoration:none;
color:#999999;
font-size:105%;
}
ul#tabs li.active a{
background:#FFFFFF;
border:1px solid #999;
border-bottom:none;
padding-bottom:16px;
color:#333333;
}

The jQuery:

jQuery(document).ready(function($){
$('#tabs li').hover(function(){
$(this).not($('.active')).stop().animate({paddingTop : "0px", paddingBottom : "14px"},150).children().stop().animate({paddingBottom : "15px"},150);
},function(){
$(this).not($('.active')).stop().animate({paddingTop : "10px", paddingBottom : "4px"},150).children().stop().animate({paddingBottom : "5px"},150);
});
});

Something to note

You may have noticed previously when doing your CSS that there is often a couple of px discrepancy between Firefox and other browsers. In the case of this demo, the height of #menuCont needs to be 1px less. To overcome this problem use the code below, this will enable you to write a rule specific to Firefox.

@-moz-document url-prefix() {
div#menuCont{
height:60px;
}
}

Other limitations

I didn’t manage to get this to work Internet Explorer below version 8.