Sliding panel

Css and jquery used to setup a sliding nav panel from the left side of the screen

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--side navigation -->
    
<div id="sideNavBar">
    <div class="button rtTurn" id="button1">
        <div class="inBtn">
        <a>click me</a>
        </div>
    </div>
    <div class="button2 rtTurn" id="button2">
        <div class="inBtn">
    <a>click me</a>
        </div>
    </div>
    
    <div id="container1">
    <ul>
    <li>link 1</li>
    <li>link 2/li>
    <li>link 3/li>
    <li>link 4</li>
    </ul></div>
    <div id="container2">
    <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    <li>link 4</li>
    </ul>
    </div>
</div>
<div id="mainContent">
<p>additional content would go here</p>
</div>
</body>
</html>

CSS

body, html{    
        background-color:#f0f0f0;
        height:100%;
        font-size:.9em;
    }
    
    #container1{
        display:block;
        width:100%;
        border:solid 1px #ccc;
        border-radius:4px;
        background-color:#0000ff;
        left:-200px;
        position:relative;
    }
    
    #container2{
        display:block;
        width:100%;
        border:solid 1px #ccc;
        border-radius:4px;
        background-color:#d8d8d8;
        left:-200px;
        position:relative;
    }
    
    #sideNavBar{
        float:left;
        width:30px;
        border: 1px solid #000 ;
        min-height:90% !important;
    }
    
    #mainContent{
        margin-left:10px;
        display:inline;
        position:relative;
        float:right;
        width:90%;
        min-height:90%;
        border:1px solid #0000ff;
    }
        
    .button
    {
    color:#000;
    position:absolute;
    cursor: pointer;
    padding:5px;
    top:100px;
    -ms-writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg) !important;
    -moz-transform: rotate(-90deg) !important;
    -ms-transform: rotate(180deg) !important;
    -o-transform: rotate(-90deg) !important;
    white-space: nowrap;
    background-color:#000;   
    -webkit-border-bottom-left-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-bottom-left-radius:2px;
    -moz-border-bottom-right-radius:2px;
     border-top-left-radius:2px;
     border-top-right-radius:2px;
    }

.inBtn
{
    background-color:#ccc;
    padding:8px 8px 8px 8px;
}

 .button2
    {
    color:#000;
    position:absolute;
    cursor: pointer;
    padding:5px;
    top:170px;
    -ms-writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg) !important;
    -moz-transform: rotate(-90deg) !important;
    -ms-transform: rotate(360deg) !important;
    -o-transform: rotate(-90deg) !important;
    white-space: nowrap;
    background-color:#000; 
    -webkit-border-bottom-left-radius:2px;
   ...

JavaScript

$('#button2').click(function() {
    $('#sideNavBar').removeAttr('width');
    $('#sideNavBar').animate({
        width:'15%' 
    });
    $('.button').hide();
    $('.button2').hide();
    $('#container2').animate({
        left: 0
    });
    $('#mainContent').animate({
        width: '80%'
    });
});