Slideout Menu

by mynameisdonald

HTML

<div class="sidebar">
    <ul>
        <li>Section 1</li>
        <li>Section 2</li>
        <li>Section 3</li>
        <li>Section 4</li>
        <li>Section 5</li>
        <li>Section 6</li>
        <li>Section 7</li>
        <li>Section 8</li>
        <li>Section 9</li>
        <li>Section 10</li>
    </ul>
</div>
<div class="sub-sidebar">
    <h2>I'm the content for section <span></span></h2>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #e8e8e8;
}
.sidebar {
    background: #2BAAE1;
    color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    top:0;
    width: 200px;
    z-index:1;
}
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar li {
    cursor: pointer;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}
.sidebar li:hover {
    background: #50bbe9;
}

.sub-sidebar {
    background: #fff;
    color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    top:0;
    width: 200px;
    z-index:0;
    transition: 0.2s linear;
}
.sub-sidebar.active {
    left: 200px;
}
.sub-sidebar h2 {
    color: #2BAAE1;
    padding: 10px;
}

JavaScript

var chosen;
$('body').on('click','.sidebar li',function(){
    
    var spanTxt = $('.sub-sidebar h2').text();
    if (spanTxt == $(this).text()){
        $('.sub-sidebar').removeClass('active');
        $('.sub-sidebar h2').text('');
    } else {
        $('.sub-sidebar').addClass('active');
//    $('.sub-sidebar').toggleClass('active');
        $('.sub-sidebar h2').text( $(this).text() );
    }
});