Sideways Tabs

Loading Panels from the left side

HTML

<div id="sliding-panel1">
    <h2>Panel 1</h2>
    <ul>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
    </ul>
</div>

<div id="sliding-panel2">
    <h2>Panel 2</h2>
    <ul>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
    </ul>
</div>

<div id="sliding-panel3">
    <h2>Panel 3</h2>
    <ul>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
    </ul>
</div>

<div id="sliding-panel4">
    <h1>Panel 4</h1>
    <ul>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li class="icon">&nbsp;</li>
        <li...

CSS

body {
    margin:0 auto;
    padding: 0;
    font-family:helvetica;
}

#menu {-webkit-transform-origin: bottom left; -webkit-transform: rotate(-90deg); position: fixed; top: 650px; left: 38px;}

#sliding-panel1, #sliding-panel2, #sliding-panel3, #sliding-panel4 {
    width: 700px;
    height: 700px;
    margin: 10px 0 0 0;
    position: absolute;
    top:0;
    padding: 10px 10px 10px 40px;
    background: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#b7b7b7));
    -webkit-border-radius: 0 10px 10px 0;
    bottom: 0;
    display: none;
    border-left: 1px solid #a6a6a6;
    border-top: 1px solid #a6a6a6;
    border-right: 1px solid #a6a6a6;
    -webkit-box-shadow:inset 0 0  1px #f2f2f2;
    color: #151515;
    text-shadow: 1px 1px 1px #fff;
}

#sliding-panel1 {background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */}


#sliding-panel2 {background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /*...

JavaScript

$(document).ready(function() {
    $('.button1').click(function() {
        $('#sliding-panel1').animate({width:'toggle'}, 400);    
        $('#sliding-panel2').animate({width:'hide'}, 1);
        $('#sliding-panel3').animate({width:'hide'}, 1);
        $('#sliding-panel4').animate({width:'hide'}, 1);
        return false;
    });

    $('.button2').click(function() {
        $('#sliding-panel1').animate({width:'hide'}, 400);
        $('#sliding-panel2').animate({width:'toggle'}, 400);
        $('#sliding-panel3').animate({width:'hide'}, 1);
        $('#sliding-panel4').animate({width:'hide'}, 1);
        return false;
    });

    $('.button3').click(function() {
        $('#sliding-panel1').animate({width:'hide'}, 1);
        $('#sliding-panel2').animate({width:'hide'}, 1);
        $('#sliding-panel3').animate({width:'toggle'}, 400);
        $('#sliding-panel4').animate({width:'hide'}, 1);
        return false;
    });

    $('.button4').click(function() {
        $('#sliding-panel1').animate({width:'hide'}, 1);
        $('#sliding-panel2').animate({width:'hide'}, 1);
        $('#sliding-panel3').animate({width:'hide'}, 1);
        $('#sliding-panel4').animate({width:'toggle'}, 400);

        return false;
    });


});