Tabs
automatically spaced tabs
by sebastianauer
HTML
<div id="wrapper">
<div id="sliding-panels">
<div id="panelcontent1">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
</ul>
</div>
<div id="menu">
<a href="#" class="button1">Tab 1</a>
</div>
<div style="clear: both;"></div>
<div id="panelcontent2">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
</ul>
</div>
<div id="menu">
<a href="#" class="button2">Tab 2</a>
</div>
<div style="clear: both;"></div>
<div id="panelcontent3">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li...
CSS
#wrapper {position: relative; width: 800px; height: 600px; overflow: hidden; background: url(http://www.digitalrevolutions.biz/wp-content/uploads/2008/05/background1_blue.jpg) top left no-repeat;}
#sliding-panels { border: 2px solid green; height: 550px; margin: 10px 0;}
#panelcontent1, #panelcontent2, #panelcontent3 {z-index: 100;position: relative; width: 700px; height: 120px; overflow: hidden; float: left; margin: 0; padding: 10px 0px; display: none;
-webkit-border-radius:0px 5px 5px 0px; -webkit-box-shadow:5px 6px 9px 2px black; background: #6db3f2; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */}
#panelcontent2 {}
#panelcontent1 ul, #panelcontent2 ul, #panelcontent3 ul {display: none;}
#menu {background: green; padding: 25px 20px; margin: 15px 0 0 -7px; float: left; -webkit-transform: rotate(-90deg); -webkit-border-radius:0px 0px 5px 5px; -webkit-box-shadow:-5px 0px 5px 1px grey;}
#menu a {color: white; font-family:helvetica, san-serif;}
#panelcontent1 ul li, #panelcontent2 ul li,#panelcontent3 ul li {height: 48px; width: 48px; background: white; margin: 6px; float: left; -webkit-border-radius: 3px;}
#panelcontent1 ul li:hover, #panelcontent2 ul li:hover, #panelcontent3 ul li:hover {background: #CFCFCF;}
JavaScript
$(document).ready(function() {
function settabs(){
$("div a[class*=button]").each (function(i){
$(this).css('text-decoration', 'none');
i++;
var thetab = "#panelcontent"+i;
var tabheight = $(thetab).outerHeight();
//alert (thetab +" is "+tabheight+"px high.");
$("div[id=menu]").css('margin-bottom', tabheight/2);
});
}
function opentab(clickedtab, thetab){
//sliding the panel
$(clickedtab).click(function() {
$(thetab).animate({width: 'toggle'}, 300);
$(thetab+" ul").toggle(300);
return false;});
}
settabs();
$("div a[class*=button]").each(function(o){
o++;
var thepanel = "#panelcontent"+o;
var thebutton = ".button"+o;
var panelstate = $(thepanel).css('display');
if (panelstate == "none"){
alert(thepanel+" is closed.");
} else {
alert(thepanel+" is open.");
}
$(thebutton).click(function() {
$(thepanel).opentab();
})
});
});