<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/khadkamhn/pen/bEgmmj" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
<style class="cp-pen-styles">.nano{position:relative;width:100%;height:100%;overflow:hidden}.nano>.nano-content,.nano>.nano-pane{position:absolute;right:0;top:0;bottom:0}.nano>.nano-content{overflow:scroll;overflow-x:hidden;left:0}.nano>.nano-content:focus{outline:dotted thin}.nano>.nano-content::-webkit-scrollbar{display:none}.has-scrollbar>.nano-content::-webkit-scrollbar{display:block}.nano>.nano-pane{background:rgba(0,0,0,.25);width:10px;visibility:hidden\9;opacity:.01;-webkit-transition:.2s;transition:.2s;border-radius:5px}.nano>.nano-pane>.nano-slider{background:#444;background:rgba(0,0,0,.5);position:relative;margin:0 1px;border-radius:3px}.nano-pane.active,.nano-pane.flashed,.nano:hover>.nano-pane{visibility:visible\9;opacity:.99}
body{
margin:0;
color:#eee;
background:#fff985;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.category .links-wrap .links:before,
.category .links-wrap .links:after{
content:'';
position:absolute;
}
.mhn-news-app{
height:100%;
width:100%;
max-width:370px;
max-height:565px;
overflow:hidden;
position:fixed;
left:50%;
margin-left:-185px;
}
.mhn-news-app>.header{
height:50px;
position:relative;
padding:15px 10px;
background:#395373;
text-align:center;
}
.mhn-news-app>.header a{
color:#95b1d3;
}
.mhn-news-app>.header .title{
font-weight:500;
display:inline-block;
}
.category{
height:200px;
width:inherit;
overflow:hidden;
background:teal;
padding:40px 30px;
position:relative;
}
.category:nth-child(1){background:#f64c73}
.category:nth-child(2){background:#20d2bb}
.category:nth-child(3){background:#c873f4}
.category .statistic-wrap,
.category .statistic-wrap .head{
text-align:center;
}
.category .statistic-wrap{-webkit-transition:all .3s ease-in-out 0s;transition:all .3s ease-in-out 0s}
.category.active .statistic-wrap{-webkit-transform:translateX(-70px);transform:translateX(-70px)}
.category .statistic-wrap .head{
font-size:24px;
font-weight:700;
margin-bottom:30px;
}
.category .statistic-wrap .statistic{
margin:0 10px;
display:inline-block;
text-transform:uppercase;
}
.category .statistic-wrap .statistic .count{
font-size:14px;
font-weight:700;
}
.category .statistic-wrap .statistic .title{
font-size:12px;
font-weight:500;
}
.category .links-wrap{
top:50%;
width:200px;
height:200px;
right:-100px;
border-radius:50%;
position:absolute;
margin-top:-100px;
}
.category .links-wrap .toggle{
top:50%;
z-index:2;
color:#eee;
right:100px;
width:25px;
height:50px;
cursor:pointer;
font-size:24px;
padding-left:4px;
text-align:center;
position:inherit;
margin-top:-25px;
line-height:50px;
background:rgba(0,0,0,.4);
border-radius:50px 0 0 50px;
}
.category .links-wrap .toggle .fa:before{content:'\f104'}
.category.active .links-wrap .toggle .fa:before{content:'\f105'}
.category .links-wrap .links{
left:0;
width:inherit;
height:inherit;
position:inherit;
border-radius:inherit;
-webkit-transition:all .4s ease-in-out 0s;
transition:all .4s ease-in-out 0s;
}
.category .links-wrap .links:before,
.category .links-wrap .links:after{
width:100px;
height:100px;
-webkit-transition:inherit;
transition:inherit;
background:rgba(0,0,0,.2);
}
.category .links-wrap .links:before{
top:-100px;
border-radius:100px 0 0 0;
}
.category .links-wrap .links:after{
bottom:-100px;
border-radius:0 0 0 100px;
}
.category.active .links-wrap .links:before{top:0}
.category.active .links-wrap .links:after{bottom:0}
.category .links a{
top:50%;
z-index:1;
right:55px;
width:42px;
height:42px;
color:rgba(0,0,0,.5);
margin-top:-21px;
line-height:42px;
text-align:center;
border-radius:50%;
background:white;
position:absolute;
display:inline-block;
-webkit-transform:translate(0,0) scale(0) rotate(360deg);
transform:translate(0,0) scale(0) rotate(360deg);
-webkit-transition:all .4s ease-in-out 0s;
transition:all .4s ease-in-out 0s;
}
.category.active .links a{right:80px}
.category.active .links-wrap .links a:nth-child(1){-webkit-transform:translate(-30px,-50px) scale(1) rotate(0deg);transform:translate(-30px,-50px) scale(1) rotate(0deg)}
.category.active .links-wrap .links a:nth-child(2){-webkit-transform:translate(-60px,0px) scale(1) rotate(0deg);transform:translate(-60px,0px) scale(1) rotate(0deg)}
.category.active .links-wrap .links a:nth-child(3){-webkit-transform:translate(-30px,50px) scale(1) rotate(0deg);transform:translate(-30px,50px) scale(1) rotate(0deg)}
.nano{height:515px}
.nano-pane{visibility:hidden}
.nav-overlay{
top:0;
left:0;
right:0;
bottom:0;
width:100%;
z-index:10;
height:100%;
display:none;
position:absolute;
background:rgba(0,0,0,.8);
}
.navi{
top:0;
bottom:0;
z-index:20;
color:#333;
width:222px;
height:100%;
background:#fff;
position:absolute;
-webkit-transform:translateX(-222px);
transform:translateX(-222px);
-webkit-transition:all .4s ease-in-out 0s;
transition:all .4s ease-in-out 0s;
}
.navi.active{
-webkit-transform:translateX(0);
transform:translateX(0);
}
.navi .header{
padding:10px;
position:relative;
background:url(https://raw.githubusercontent.com/khadkamhn/secret-project/master/img/background.jpg) no-repeat center 100%/cover;
}
.navi .header:after{
top:0;
left:0;
right:0;
bottom:0;
width:100%;
content:'';
height:100%;
position:absolute;
background:rgba(0,0,0,.3);
}
.navi .header img,
.navi .header h4{color:#fff;position:relative;z-index:10;text-shadow:0 2px 3px #000}
.navi .header img{border-radius:50%}
.navi .links{
margin-top:5px;
}
.navi .links a{
padding:10px;
color:inherit;
display:block;
font-size:16px;
font-weight:500;
text-decoration:none;
}
.navi .links a:hover{
background:rgba(0,0,0,.1);
}
.navi .links a .fa{min-width:20px}</style></head><body>
<div class="mhn-news-app">
<div class="header">
<div class="clearfix">
<a href="#navi" class="pull-left"><i class="fa fa-bars"></i></a>
<span class="title">City News</span>
<a href="#" class="pull-right"><i class="fa fa-search"></i></a>
</div>
</div>
<div class="nano">
<div class="nano-content">
<div class="category-wrap">
<div class="category">
<div class="statistic-wrap">
<div class="head"><i class="fa fa-moon-o"></i> Night Life</div>
<div class="statistic">
<div class="count">330</div>
<div class="title">Followers</div>
</div>
<div class="statistic">
<div class="count">290</div>
<div class="title">Favourites</div>
</div>
<div class="statistic">
<div class="count">1725</div>
<div class="title">Views</div>
</div>
</div>
<div class="links-wrap">
<div class="toggle"><i class="fa"></i></div>
<div class="links">
<a href="#"><i class="fa fa-plus"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-mail-reply"></i></a>
</div>
</div>
</div>
<div class="category">
<div class="statistic-wrap">
<div class="head"><i class="fa fa-paint-brush"></i> Art & Culture</div>
<div class="statistic">
<div class="count">330</div>
<div class="title">Followers</div>
</div>
<div class="statistic">
<div class="count">290</div>
<div class="title">Favourites</div>
</div>
<div class="statistic">
<div class="count">1725</div>
<div class="title">Views</div>
</div>
</div>
<div class="links-wrap">
<div class="toggle"><i class="fa"></i></div>
<div class="links">
<a href="#"><i class="fa fa-plus"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-mail-reply"></i></a>
</div>
</div>
</div>
<div class="category">
<div class="statistic-wrap">
<div class="head"><i class="fa fa-fort-awesome"></i> Food Festival</div>
<div class="statistic">
<div class="count">330</div>
<div class="title">Followers</div>
</div>
<div class="statistic">
<div class="count">290</div>
<div class="title">Favourites</div>
</div>
<div class="statistic">
<div class="count">1725</div>
<div class="title">Views</div>
</div>
</div>
<div class="links-wrap">
<div class="toggle"><i class="fa"></i></div>
<div class="links">
<a href="#"><i class="fa fa-plus"></i></a>
<a href="#"><i class="fa fa-star"></i></a>
<a href="#"><i class="fa fa-mail-reply"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-overlay"></div>
<div class="navi">
<div class="header">
<img src="https://s.gravatar.com/avatar/24a65a47147cddf5b270bc9f609ffa2a?s=100">
<h4>Mohan Khadka</h4>
</div>
<div class="links">
<a href="javascript:void(0)"><i class="fa fa-user"></i> Profile</a>
<a href="javascript:void(0)"><i class="fa fa-briefcase"></i> Portfolio</a>
<a href="javascript:void(0)"><i class="fa fa-refresh"></i> Updates</a>
<a href="javascript:void(0)"><i class="fa fa-cogs"></i> Settings</a>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script >/*! nanoScrollerJS - v0.8.7 - (c) 2015 James Florentino; Licensed MIT */
!function(a){return"function"==typeof define&&define.amd?define(["jquery"],function(b){return a(b,window,document)}):"object"==typeof exports?module.exports=a(require("jquery"),window,document):a(jQuery,window,document)}(function(a,b,c){"use strict";var d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H;z={paneClass:"nano-pane",sliderClass:"nano-slider",contentClass:"nano-content",enabledClass:"has-scrollbar",flashedClass:"flashed",activeClass:"active",iOSNativeScrolling:!1,preventPageScrolling:!1,disableResize:!1,alwaysVisible:!1,flashDelay:1500,sliderMinHeight:20,sliderMaxHeight:null,documentContext:null,windowContext:null},u="scrollbar",t="scroll",l="mousedown",m="mouseenter",n="mousemove",p="mousewheel",o="mouseup",s="resize",h="drag",i="enter",w="up",r="panedown",f="DOMMouseScroll",g="down",x="wheel",j="keydown",k="keyup",v="touchmove",d="Microsoft Internet Explorer"===b.navigator.appName&&/msie 7./i.test(b.navigator.appVersion)&&b.ActiveXObject,e=null,D=b.requestAnimationFrame,y=b.cancelAnimationFrame,F=c.createElement("div").style,H=function(){var a,b,c,d,e,f;for(d=["t","webkitT","MozT","msT","OT"],a=e=0,f=d.length;f>e;a=++e)if(c=d[a],b=d[a]+"ransform",b in F)return d[a].substr(0,d[a].length-1);return!1}(),G=function(a){return H===!1?!1:""===H?a:H+a.charAt(0).toUpperCase()+a.substr(1)},E=G("transform"),B=E!==!1,A=function(){var a,b,d;return a=c.createElement("div"),b=a.style,b.position="absolute",b.width="100px",b.height="100px",b.overflow=t,b.top="-9999px",c.body.appendChild(a),d=a.offsetWidth-a.clientWidth,c.body.removeChild(a),d},C=function(){var a,c,d;return c=b.navigator.userAgent,(a=/(?=.+Mac OS X)(?=.+Firefox)/.test(c))?(d=/Firefox\/\d{2}\./.exec(c),d&&(d=d[0].replace(/\D+/g,"")),a&&+d>23):!1},q=function(){function j(d,f){this.el=d,this.options=f,e||(e=A()),this.$el=a(this.el),this.doc=a(this.options.documentContext||c),this.win=a(this.options.windowContext||b),this.body=this.doc.find("body"),this.$content=this.$el.children("."+this.options.contentClass),this.$content.attr("tabindex",this.options.tabIndex||0),this.content=this.$content[0],this.previousPosition=0,this.options.iOSNativeScrolling&&null!=this.el.style.WebkitOverflowScrolling?this.nativeScrolling():this.generate(),this.createEvents(),this.addEvents(),this.reset()}return j.prototype.preventScrolling=function(a,b){if(this.isActive)if(a.type===f)(b===g&&a.originalEvent.detail>0||b===w&&a.originalEvent.detail<0)&&a.preventDefault();else if(a.type===p){if(!a.originalEvent||!a.originalEvent.wheelDelta)return;(b===g&&a.originalEvent.wheelDelta<0||b===w&&a.originalEvent.wheelDelta>0)&&a.preventDefault()}},j.prototype.nativeScrolling=function(){this.$content.css({WebkitOverflowScrolling:"touch"}),this.iOSNativeScrolling=!0,this.isActive=!0},j.prototype.updateScrollValues=function(){var a,b;a=this.content,this.maxScrollTop=a.scrollHeight-a.clientHeight,this.prevScrollTop=this.contentScrollTop||0,this.contentScrollTop=a.scrollTop,b=this.contentScrollTop>this.previousPosition?"down":this.contentScrollTop<this.previousPosition?"up":"same",this.previousPosition=this.contentScrollTop,"same"!==b&&this.$el.trigger("update",{position:this.contentScrollTop,maximum:this.maxScrollTop,direction:b}),this.iOSNativeScrolling||(this.maxSliderTop=this.paneHeight-this.sliderHeight,this.sliderTop=0===this.maxScrollTop?0:this.contentScrollTop*this.maxSliderTop/this.maxScrollTop)},j.prototype.setOnScrollStyles=function(){var a;B?(a={},a[E]="translate(0, "+this.sliderTop+"px)"):a={top:this.sliderTop},D?(y&&this.scrollRAF&&y(this.scrollRAF),this.scrollRAF=D(function(b){return function(){return b.scrollRAF=null,b.slider.css(a)}}(this))):this.slider.css(a)},j.prototype.createEvents=function(){this.events={down:function(a){return function(b){return a.isBeingDragged=!0,a.offsetY=b.pageY-a.slider.offset().top,a.slider.is(b.target)||(a.offsetY=0),a.pane.addClass(a.options.activeClass),a.doc.bind(n,a.events[h]).bind(o,a.events[w]),a.body.bind(m,a.events[i]),!1}}(this),drag:function(a){return function(b){return a.sliderY=b.pageY-a.$el.offset().top-a.paneTop-(a.offsetY||.5*a.sliderHeight),a.scroll(),a.contentScrollTop>=a.maxScrollTop&&a.prevScrollTop!==a.maxScrollTop?a.$el.trigger("scrollend"):0===a.contentScrollTop&&0!==a.prevScrollTop&&a.$el.trigger("scrolltop"),!1}}(this),up:function(a){return function(b){return a.isBeingDragged=!1,a.pane.removeClass(a.options.activeClass),a.doc.unbind(n,a.events[h]).unbind(o,a.events[w]),a.body.unbind(m,a.events[i]),!1}}(this),resize:function(a){return function(b){a.reset()}}(this),panedown:function(a){return function(b){return a.sliderY=(b.offsetY||b.originalEvent.layerY)-.5*a.sliderHeight,a.scroll(),a.events.down(b),!1}}(this),scroll:function(a){return function(b){a.updateScrollValues(),a.isBeingDragged||(a.iOSNativeScrolling||(a.sliderY=a.sliderTop,a.setOnScrollStyles()),null!=b&&(a.contentScrollTop>=a.maxScrollTop?(a.options.preventPageScrolling&&a.preventScrolling(b,g),a.prevScrollTop!==a.maxScrollTop&&a.$el.trigger("scrollend")):0===a.contentScrollTop&&(a.options.preventPageScrolling&&a.preventScrolling(b,w),0!==a.prevScrollTop&&a.$el.trigger("scrolltop"))))}}(this),wheel:function(a){return function(b){var c;if(null!=b)return c=b.delta||b.wheelDelta||b.originalEvent&&b.originalEvent.wheelDelta||-b.detail||b.originalEvent&&-b.originalEvent.detail,c&&(a.sliderY+=-c/3),a.scroll(),!1}}(this),enter:function(a){return function(b){var c;if(a.isBeingDragged)return 1!==(b.buttons||b.which)?(c=a.events)[w].apply(c,arguments):void 0}}(this)}},j.prototype.addEvents=function(){var a;this.removeEvents(),a=this.events,this.options.disableResize||this.win.bind(s,a[s]),this.iOSNativeScrolling||(this.slider.bind(l,a[g]),this.pane.bind(l,a[r]).bind(""+p+" "+f,a[x])),this.$content.bind(""+t+" "+p+" "+f+" "+v,a[t])},j.prototype.removeEvents=function(){var a;a=this.events,this.win.unbind(s,a[s]),this.iOSNativeScrolling||(this.slider.unbind(),this.pane.unbind()),this.$content.unbind(""+t+" "+p+" "+f+" "+v,a[t])},j.prototype.generate=function(){var a,c,d,f,g,h,i;return f=this.options,h=f.paneClass,i=f.sliderClass,a=f.contentClass,(g=this.$el.children("."+h)).length||g.children("."+i).length||this.$el.append('<div class="'+h+'"><div class="'+i+'" /></div>'),this.pane=this.$el.children("."+h),this.slider=this.pane.find("."+i),0===e&&C()?(d=b.getComputedStyle(this.content,null).getPropertyValue("padding-right").replace(/[^0-9.]+/g,""),c={right:-14,paddingRight:+d+14}):e&&(c={right:-e},this.$el.addClass(f.enabledClass)),null!=c&&this.$content.css(c),this},j.prototype.restore=function(){this.stopped=!1,this.iOSNativeScrolling||this.pane.show(),this.addEvents()},j.prototype.reset=function(){var a,b,c,f,g,h,i,j,k,l,m,n;return this.iOSNativeScrolling?void(this.contentHeight=this.content.scrollHeight):(this.$el.find("."+this.options.paneClass).length||this.generate().stop(),this.stopped&&this.restore(),a=this.content,f=a.style,g=f.overflowY,d&&this.$content.css({height:this.$content.height()}),b=a.scrollHeight+e,l=parseInt(this.$el.css("max-height"),10),l>0&&(this.$el.height(""),this.$el.height(a.scrollHeight>l?l:a.scrollHeight)),i=this.pane.outerHeight(!1),k=parseInt(this.pane.css("top"),10),h=parseInt(this.pane.css("bottom"),10),j=i+k+h,n=Math.round(j/b*i),n<this.options.sliderMinHeight?n=this.options.sliderMinHeight:null!=this.options.sliderMaxHeight&&n>this.options.sliderMaxHeight&&(n=this.options.sliderMaxHeight),g===t&&f.overflowX!==t&&(n+=e),this.maxSliderTop=j-n,this.contentHeight=b,this.paneHeight=i,this.paneOuterHeight=j,this.sliderHeight=n,this.paneTop=k,this.slider.height(n),this.events.scroll(),this.pane.show(),this.isActive=!0,a.scrollHeight===a.clientHeight||this.pane.outerHeight(!0)>=a.scrollHeight&&g!==t?(this.pane.hide(),this.isActive=!1):this.el.clientHeight===a.scrollHeight&&g===t?this.slider.hide():this.slider.show(),this.pane.css({opacity:this.options.alwaysVisible?1:"",visibility:this.options.alwaysVisible?"visible":""}),c=this.$content.css("position"),("static"===c||"relative"===c)&&(m=parseInt(this.$content.css("right"),10),m&&this.$content.css({right:"",marginRight:m})),this)},j.prototype.scroll=function(){return this.isActive?(this.sliderY=Math.max(0,this.sliderY),this.sliderY=Math.min(this.maxSliderTop,this.sliderY),this.$content.scrollTop(this.maxScrollTop*this.sliderY/this.maxSliderTop),this.iOSNativeScrolling||(this.updateScrollValues(),this.setOnScrollStyles()),this):void 0},j.prototype.scrollBottom=function(a){return this.isActive?(this.$content.scrollTop(this.contentHeight-this.$content.height()-a).trigger(p),this.stop().restore(),this):void 0},j.prototype.scrollTop=function(a){return this.isActive?(this.$content.scrollTop(+a).trigger(p),this.stop().restore(),this):void 0},j.prototype.scrollTo=function(a){return this.isActive?(this.scrollTop(this.$el.find(a).get(0).offsetTop),this):void 0},j.prototype.stop=function(){return y&&this.scrollRAF&&(y(this.scrollRAF),this.scrollRAF=null),this.stopped=!0,this.removeEvents(),this.iOSNativeScrolling||this.pane.hide(),this},j.prototype.destroy=function(){return this.stopped||this.stop(),!this.iOSNativeScrolling&&this.pane.length&&this.pane.remove(),d&&this.$content.height(""),this.$content.removeAttr("tabindex"),this.$el.hasClass(this.options.enabledClass)&&(this.$el.removeClass(this.options.enabledClass),this.$content.css({right:""})),this},j.prototype.flash=function(){return!this.iOSNativeScrolling&&this.isActive?(this.reset(),this.pane.addClass(this.options.flashedClass),setTimeout(function(a){return function(){a.pane.removeClass(a.options.flashedClass)}}(this),this.options.flashDelay),this):void 0},j}(),a.fn.nanoScroller=function(b){return this.each(function(){var c,d;if((d=this.nanoscroller)||(c=a.extend({},z,b),this.nanoscroller=d=new q(this,c)),b&&"object"==typeof b){if(a.extend(d.options,b),null!=b.scrollBottom)return d.scrollBottom(b.scrollBottom);if(null!=b.scrollTop)return d.scrollTop(b.scrollTop);if(b.scrollTo)return d.scrollTo(b.scrollTo);if("bottom"===b.scroll)return d.scrollBottom(0);if("top"===b.scroll)return d.scrollTop(0);if(b.scroll&&b.scroll instanceof a)return d.scrollTo(b.scroll);if(b.stop)return d.stop();if(b.destroy)return d.destroy();if(b.flash)return d.flash()}return d.reset()})},a.fn.nanoScroller.Constructor=q});
$(function(){
$('.toggle').click(function(e){
e.preventDefault();
$(this).closest('.category').siblings().removeClass('active');
$(this).closest('.category').toggleClass('active');
});
$(".nano").nanoScroller({iOSNativeScrolling:true});
$('a[href="#navi"],.nav-overlay').on('click',function(e){
e.preventDefault();
$('.navi').toggleClass('active');
if($('.navi').hasClass('active')){
$('.nav-overlay').fadeIn(100);
}else{
$('.nav-overlay').fadeOut(100);
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
