Responsive Navigation Menu using CSS and jQuery
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Resize Nav Menu Demo</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin" rel="stylesheet" type="text/css">
</head>
<body>
<style>
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}
dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}
mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{box-sizing:border-box}:after,:before{box-sizing:inherit}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:@font-family-base}body{font-family:Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.4rem;line-height:1.42857143;color:#555;background-color:#f7f7f7}a{text-decoration:none}ul{margin:0;padding:0;list-style:none}main{margin-top:10rem;text-align:center}
header{-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:7rem;padding:0 15px;position:fixed;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;top:0;width:100%}
.site-logo{transition:color .2s cubic-bezier(.55,0,.1,1);color:#30acff;font-size:3rem}
.ok-header__logo:hover{color:#546edb}
body.resizeNav-loaded{overflow-x:hidden}
.resizeNav-header{position:fixed;top:0;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:row;width:100%;padding:0 15px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
.resizeNav:not(.loaded){visibility:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.resizeNav ul{float:left}
.resizeNav a{position:relative;z-index:1}
.resizeNav__nav--visible{overflow:hidden;white-space:nowrap}
.resizeNav__nav--visible li{display:inline-block}.resizeNav__nav--visible a{display:block;padding:15px;transition:color .2s cubic-bezier(.55,0,.1,1)}
.resizeNav__nav--visible:empty~.resizeNav__menu-toggle{top:0}.resizeNav__nav--invisible{position:fixed;top:7rem;bottom:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.resizeNav__nav--invisible a{display:block;width:240px;padding:15px;background:#fff}.resizeNav__nav--invisible.nav-left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.resizeNav__nav--invisible.nav-right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.resizeNav__nav--invisible.transition-enabled{transition:-webkit-transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1),-webkit-transform .4s cubic-bezier(.55,0,.1,1)}.resizeNav__nav--invisible.nav-open{-webkit-transform:translateX(0);transform:translateX(0)}.resizeNav__menu-toggle{position:relative;z-index:1;top:15px;float:left;width:40px;height:20px;cursor:pointer;transition:-webkit-transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1),-webkit-transform .4s cubic-bezier(.55,0,.1,1)}.resizeNav__menu-toggle.okay-invisible{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:0}.resizeNav__menu-toggle span{position:absolute;right:0;left:0;display:block;width:4px;height:4px;margin:auto;pointer-events:none;border-radius:50%}.resizeNav__menu-toggle span:nth-child(1){top:0}.resizeNav__menu-toggle span:nth-child(2){top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.resizeNav__menu-toggle span:nth-child(3){bottom:0}.resizeNav__menu-toggle.icon--active{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.resizeNav-header{height:7rem;background-color:#fff}
.resizeNav a{color:#2e2e33;font-size:1.4rem;font-weight:700}
.resizeNav__nav--visible a:hover,.resizeNav a:hover{color:#546edb}
.resizeNav__nav--invisible{background:#fff}.resizeNav__menu-toggle span{background:#2e2e33}.resizeNav__menu-toggle.icon--active span{background:#546edb}
</style>
<header id="header" class="resizeNav-header">
<a class="resizeNav-header__logo" href="#">
Logo
</a>
<nav role="navigation" id="nav-main" class="resizeNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</nav>
</header><!-- /header -->
<main>
<h1>Resize your browser to preview navigation menu</h1>
</main>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=function(n,i){return void 0===i&&(i="undefined"!=typeof window?require("jquery"):require("jquery")(n)),e(i),i}:e(jQuery)}(function(e){function n(n,i){self=this,this.options=e.extend({},s,i),self.options=this.options,self.navigation=e(n),self.document=e(document),self.window=e(window),""==this.options.parent?this.options.parent=self.navigation.parent():"",self.nav_open=!1,self.parent_full_width=0,self.radCoef=180/Math.PI,self.sTouch={x:0,y:0},self.cTouch={x:0,y:0},self.sTime=0,self.nav_position=0,self.percent_open=0,self.nav_moving=!1,self.init()}var i="resizeNav",s={parent:"",toggle_icon_class:"resizeNav__menu-toggle",toggle_icon_content:"<span /><span /><span />",align_right:!0,swipe_enabled:!0,threshold:50,resize_delay:10,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},itemHidden:function(){},itemDisplayed:function(){}};n.prototype={init:function(){e("body").addClass("resizeNav-loaded"),self.navigation.addClass("resizeNav loaded").children("ul").addClass("resizeNav__nav--visible"),self.options.align_right?self.navigation.append('<ul class="resizeNav__nav--invisible transition-enabled nav-right" />').append('<a href="#" class="'+self.options.toggle_icon_class+' okay-invisible">'+self.options.toggle_icon_content+"</a>"):self.navigation.prepend('<ul class="resizeNav__nav--invisible transition-enabled nav-left" />').prepend('<a href="#" class="'+self.options.toggle_icon_class+' okay-invisible">'+self.options.toggle_icon_content+"</a>"),self.nav_visible=self.navigation.children(".resizeNav__nav--visible"),self.nav_invisible=self.navigation.children(".resizeNav__nav--invisible"),self.toggle_icon=self.navigation.children("."+self.options.toggle_icon_class),self.toggle_icon_width=self.toggle_icon.outerWidth(!0),self.default_width=self.getChildrenWidth(self.navigation),self.parent_full_width=e(self.options.parent).outerWidth(!0),self.last_visible_child_width=0,self.initEvents(),self.nav_visible.contents().filter(function(){return this.nodeType=Node.TEXT_NODE&&/\S/.test(this.nodeValue)===!1}).remove(),1==self.options.swipe_enabled&&self.initSwipeEvents()},initEvents:function(){self.document.on("click.resizeNav",function(n){var i=e(n.target);self.nav_open===!0&&0==i.closest(".resizeNav").length&&self.closeInvisibleNav(),i.hasClass(self.options.toggle_icon_class)&&(n.preventDefault(),self.toggleInvisibleNav())});var n=self._debounce(function(){self.recalcNav()},self.options.recalc_delay);self.window.on("load.resizeNav resize.resizeNav",n)},initSwipeEvents:function(){self.document.on("touchstart.resizeNav",function(n){if(self.nav_invisible.removeClass("transition-enabled"),1==n.originalEvent.touches.length){var i=n.originalEvent.touches[0];(i.pageX<25&&0==self.options.align_right||i.pageX>e(self.options.parent).outerWidth(!0)-25&&1==self.options.align_right||self.nav_open===!0)&&(self.sTouch.x=self.cTouch.x=i.pageX,self.sTouch.y=self.cTouch.y=i.pageY,self.sTime=Date.now())}}).on("touchmove.resizeNav",function(e){var n=e.originalEvent.touches[0];self._triggerMove(n.pageX,n.pageY),self.nav_moving=!0}).on("touchend.resizeNav",function(e){self.sTouch={x:0,y:0},self.cTouch={x:0,y:0},self.sTime=0,self.percent_open>100-self.options.threshold?(self.nav_position=0,self.closeInvisibleNav()):1==self.nav_moving&&(self.nav_position=self.nav_invisible.width(),self.openInvisibleNav()),self.nav_moving=!1,self.nav_invisible.addClass("transition-enabled")})},_getDirection:function(e){return self.options.align_right?e>0?-1:1:0>e?-1:1},_triggerMove:function(e,n){self.cTouch.x=e,self.cTouch.y=n;var i=Date.now(),s=self.cTouch.x-self.sTouch.x,l=self.cTouch.y-self.sTouch.y,t=l*l,o=Math.sqrt(s*s+t),a=Math.sqrt(t),f=Math.asin(Math.sin(a/o))*self.radCoef;o/(i-self.sTime);if(self.sTouch.x=e,self.sTouch.y=n,20>f){var v=self._getDirection(s),c=self.nav_position+v*o,r=self.nav_invisible.width(),d=0;0>c?d=-c:c>r&&(d=r-c);var _=r-(self.nav_position+v*o+d),p=_/r*100;self.nav_position+=v*o+d,self.percent_open=p,self.nav_invisible.css("transform","translateX("+(self.options.align_right?1:-1)*p+"%)")}},getParent:function(){return self.options.parent},getVisibleNav:function(){return self.nav_visible},getInvisibleNav:function(){return self.nav_invisible},getNavToggleIcon:function(){return self.toggle_icon},_debounce:function(e,n,i){var s;return function(){var l=this,t=arguments,o=function(){s=null,i||e.apply(l,t)},a=i&&!s;clearTimeout(s),s=setTimeout(o,n),a&&e.apply(l,t)}},openInvisibleNav:function(){self.options.enable_swipe?"":self.options.beforeOpen.call(),self.toggle_icon.addClass("icon--active"),self.nav_invisible.addClass("nav-open"),self.nav_open=!0,self.nav_invisible.css({"-webkit-transform":"translateX(0%)",transform:"translateX(0%)"}),self.options.afterOpen.call()},closeInvisibleNav:function(){self.options.enable_swipe?"":self.options.beforeClose.call(),self.toggle_icon.removeClass("icon--active"),self.nav_invisible.removeClass("nav-open"),self.options.align_right?self.nav_invisible.css({"-webkit-transform":"translateX(100%)",transform:"translateX(100%)"}):self.nav_invisible.css({"-webkit-transform":"translateX(-100%)",transform:"translateX(-100%)"}),self.nav_open=!1,self.options.afterClose.call()},toggleInvisibleNav:function(){self.nav_open?self.closeInvisibleNav():self.openInvisibleNav()},getChildrenWidth:function(n){for(var i=0,s=e(n).children(),l=0;l<s.length;l++)i+=e(s[l]).outerWidth(!0);return i},getVisibleItemCount:function(){return e("li",self.nav_visible).length},getHiddenItemCount:function(){return e("li",self.nav_invisible).length},recalcNav:function(){var n=e(self.options.parent).outerWidth(!0),i=self.getChildrenWidth(self.options.parent),s=self.navigation.outerWidth(!0),l=self.getVisibleItemCount(),t=self.nav_visible.outerWidth(!0)+self.toggle_icon_width,o=i+self.last_visible_child_width+self.toggle_icon_width,a=i-s+self.default_width;return n>a?(self._expandAllItems(),void self.toggle_icon.addClass("okay-invisible")):(l>0&&t>=s&&o>=n&&self._collapseNavItem(),n>o+self.toggle_icon_width+15&&self._expandNavItem(),void(0==self.getHiddenItemCount()?self.toggle_icon.addClass("okay-invisible"):self.toggle_icon.removeClass("okay-invisible")))},_collapseNavItem:function(){var n=e("li:last-child",self.nav_visible);self.last_visible_child_width=n.outerWidth(!0),self.document.trigger("resizeNav:collapseItem",n),n.detach().prependTo(self.nav_invisible),self.options.itemHidden.call(),self.recalcNav()},_expandNavItem:function(){var n=e("li:first-child",self.nav_invisible);self.document.trigger("resizeNav:expandItem",n),n.detach().appendTo(self.nav_visible),self.options.itemDisplayed.call()},_expandAllItems:function(){e("li",self.nav_invisible).detach().appendTo(self.nav_visible),self.options.itemDisplayed.call()},_collapseAllItems:function(){e("li",self.nav_visible).detach().appendTo(self.nav_invisible),self.options.itemHidden.call()},destroy:function(){e("li",self.nav_invisible).appendTo(self.nav_visible),self.nav_invisible.remove(),self.nav_visible.removeClass("resizeNav__nav--visible"),self.toggle_icon.remove(),self.document.unbind(".resizeNav"),self.window.unbind(".resizeNav")}},e.fn[i]=function(s){var l=arguments;if(void 0===s||"object"==typeof s)return this.each(function(){e.data(this,"plugin_"+i)||e.data(this,"plugin_"+i,new n(this,s))});if("string"==typeof s&&"_"!==s[0]&&"init"!==s){var t;return this.each(function(){var o=e.data(this,"plugin_"+i);o instanceof n&&"function"==typeof o[s]&&(t=o[s].apply(o,Array.prototype.slice.call(l,1))),"destroy"===s&&e.data(this,"plugin_"+i,null)}),void 0!==t?t:this}}});
var navigation = $('#nav-main').resizeNav();
</script>
</body>
</html>
