Aside + Nicescroll + Panel Toggle - GREAT EXAMPLE

by bizamajig

HTML

<script src="https://raw.github.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.min.js"></script>
<div id="panel" class="animate panel-position-left">
	<div class="menu-nav-bar">
		<a href="javascript:void(0);">Menu</a>
	</div>
	<div class="menu-content"  id="scroller">
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a>
		<a ...

CSS

html {
font-size: 14px;
line-height: 20px;
height: 100%;
}

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;    
height: 100%;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
overflow: hidden;
    background:#fcfcfc;
}    



#panel{
    position:absolute;
    top:0;
    width:300px;
    bottom:0;
    left:0;
    z-index:30;
    background:#afafaf;
}

#panel .menu-content{
    position:fixed;
    top:40px;
    left:0;
    width:100%;
    bottom:0;
}

#panel a{
    display:block;
    padding:5px;
    color:#000;
    text-decoration:none;
    line-height:40px;
    border-bottom:1px solid #999;
}

#panel .menu-nav-bar {
position: absolute;
background: rgba(229,229,229,1);
height: 40px;
width: 100%;
overflow: hidden;
line-height: 40px;
color: #222;
z-index: 2;
border-bottom: 1px solid #898989;
}
#panel .menu-nav-bar a{
 padding:0;
    padding-left:10px;
}
    


*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}



#page {
position: absolute;
-webkit-overflow-scrolling: touch;
overflow: auto;
width: 100%;
top: 0px;
bottom: 0;
z-index: 100;
    background:#999;
}


.gpu {
transform: translate3D(0, 0, 0);
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
}

.animate {
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 250ms ease-out;
-moz-transition: -moz-transform 250ms ease-out;
transition: transform 250ms ease-out;
}

.animate-ease-out {
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 250ms ease-out;
-moz-transition: -moz-transition: -webkit-transform 250ms ease-out;
-o-transition: -o-transition: -webkit-transform 250ms ease-out;
-ms-transition: -ms-transition: -webkit-transform 250ms ease-out;
transition: transform .25s ease-out;
}

.left-open {
-webkit-transform:...

JavaScript

//  wrapper does not work
//  $("#panel").niceScroll('#scroller',{cursorcolor:"#00F"}); 

    $("#panel .menu-content").niceScroll({cursorcolor:"#00F"});

    


//  toggle sidemenu open / close
    $("#menu-left-slide").on('click',function(e){
    e.preventDefault();
        $("#page").toggleClass('left-open');
        $("#panel").toggleClass('panel-open');
        
    });