/ Mobile Menu

Details Info & Navigation

Details Info & Navigation

Details Info & Navigation

Navigation with jQuery, CSS and HTML.

Made with

Html
Css
JavaScript

html

<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 &amp; 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>

Css

.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;-moz-transition:.2s;-o-transition:.2s;transition:.2s;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.nano>.nano-pane>.nano-slider{background:#444;background:rgba(0,0,0,.5);position:relative;margin:0 1px;-moz-border-radius:3px;-webkit-border-radius:3px;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{transition:all .3s ease-in-out 0s}
.category.active .statistic-wrap{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;
	transition:all .4s ease-in-out 0s;
}
.category .links-wrap .links:before,
.category .links-wrap .links:after{
	width:100px;
	height:100px;
	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;
	transform:translate(0,0) scale(0) rotate(360deg);
	transition:all .4s ease-in-out 0s;
}
.category.active .links a{right:80px}
.category.active .links-wrap .links a:nth-child(1){transform:translate(-30px,-50px) scale(1) rotate(0deg)}
.category.active .links-wrap .links a:nth-child(2){transform:translate(-60px,0px) scale(1) rotate(0deg)}
.category.active .links-wrap .links a:nth-child(3){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;
	transform:translateX(-222px);
	transition:all .4s ease-in-out 0s;
}
.navi.active{
	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}

JavaScript

/*! 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);
		}
	});
});

Demo

See the Pen Details Info & Navigation by Mohan Khadka (@khadkamhn) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More