SO - 22817355

by Arun P Johny

HTML

<div class="main">
    <div class="sidepanel">
        <img src="menu.png" alt="menu image" class="menu"/>
        <ul class="side">
            <li><a href="#">File1</a></li>
            <li><a href="#">File2</a></li>
            <li><a href="#">File3</a></li>
        </ul>
    </div>
    
    <!-- right panel-->
    <div class="rightpanel">
        rightpanel content
    </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    background-color: #eee;
}
a, img {
    border: none;
}
ul {
    padding: 0;
    margin: 0;
}
li {
    margin:0;
    list-style: none;
}
.sidepanel {
    width: 30%;
    position: fixed;
    background-color: #353535;
    top: 0;
    bottom: 0;
    float: left;
}
.rightpanel {
    width: 70%;
    float: right;
}
.menu {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    cursor: pointer;
}
ul.side {
    clear: both;
    float: left;
    margin-top: 10px;
}

JavaScript

$(document).ready(function () {
    var flag = false;
    $('.menu').click(function () {
        if (flag) {
            $('.sidepanel').stop(true).animate({
                "width": "30%"
            });
            $('.rightpanel').stop(true).animate({
                "width": "70%"
            });
        } else {
            $('.sidepanel').stop(true).animate({
                "width": "5%"
            });
            $('.rightpanel').stop(true).animate({
                "width": "95%"
            });
        }
        flag = !flag;

    });
});