Testing nicescroll in side panels

by Plippie Plop

HTML

<script src="https://raw.github.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css">
<script src="https://github.com/FortAwesome/Font-Awesome/blob/master/font/fontawesome-webfont.woff"></script>
<script src="https://github.com/FortAwesome/Font-Awesome/blob/master/font/fontawesome-webfont.svg"></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">
     
     
  <div class="menu-items">					
  		<div class="fx-dropdown">      	
          	<h3>          	
            <i class="icon-group acc-icon"></i> Work <i class="icon-caret-down toggle-icon"></i> </h3>        
            <ul>
              <li><a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 01</a></li>
              <li><a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 02</a></li>
              <li><a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 03</a></li>
              <li><a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 04</a></li>
              <li><a  href="javascript:void(0);" data-url="" class="menu-link" data-target="module" data-linktype="html"><i class="icon-star"></i>Item 05</a></li>
            </ul>       
       </div>
       
       <div class="fx-dropdown">      	
          	<h3>          	
            <i class="icon-group acc-icon"></i> Work <i class="icon-caret-down toggle-icon"></i> </h3>        
            <ul>
              <li><a  href="javascript:void(0);" data-url="" class="menu-link"...

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:relative;

}

#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: translate3d(300px,0,0);
-moz-transform:...

JavaScript

//wrapper does work:
 var test = $("#panel").niceScroll('#panel #scroller',{cursorcolor:"#00F",touchbehavior:true}); 
    


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