Tab (right hand side)

by sebastianauer

HTML

<div id="wrapper">
    <div id="sliding-panels">
        <div id="panelcontent">
            <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="menu">
            <a href="#" class="button1">Tab 1</a>
        </div>
        <div style="clear: both;"></div>
        <div id="panelcontent2">
            <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="menu2">
            <a href="#" class="button2">Tab 2</a>
        </div>
    </div>
</div>
</div>

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;}


#panelcontent, #panelcontent2 {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+ */}

#panelcontent ul, #panelcontent2 ul {display: none;}
#panelcontent2 {clear: left;}

#menu, #menu2 {background: green; padding: 15px 10px; margin: 15px 0 0 -6px; width: 40px; float: left; -webkit-transform: rotate(-90deg); -webkit-border-radius:0px 0px 5px 5px; -webkit-box-shadow:-5px 6px 9px 2px black;}

#menu, #panelcontent {z-index: 100;}
#menu2, #panelcontent2 {z-index: 10;}

#panelcontent ul li, #panelcontent2 ul li {height: 48px; width: 48px; background: white; margin: 6px; float: left; -webkit-border-radius: 3px;}
#panelcontent ul li:hover, #panelcontent2 ul li:hover {background: #CFCFCF;}

JavaScript

$(document).ready(function() {
    $('.button1').click(function() {
        $('#panelcontent').animate({
            width: 'toggle'
        }, 300);
        $('#panelcontent ul').toggle(300);
        return false;
    });

    $('.button2').click(function() {
        $('#panelcontent2').animate({
            width: 'toggle'
        }, 300);
        $('#panelcontent2 ul').toggle(300);
        return false;
    });
});