Menu OkayNav

Menu Navigation Bar Responsive

by Teja Sukmana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:700,400&amp;subset=latin"></script>
<script>!function(i){"function"==typeof define&&define.amd?define(["jquery"],i):"object"==typeof module&&module.exports?module.exports=function(n,e){return void 0===e&&(e="undefined"!=typeof window?require("jquery"):require("jquery")(n)),i(e),e}:i(jQuery)}(function(i){function n(n,e){var o=this;this.options=i.extend({},t,e),o.navigation=i(n),o.document=i(document),o.window=i(window),""==this.options.parent?this.options.parent=o.navigation.parent():"",o.nav_open=!1,o.parent_full_width=0,o.radCoef=180/Math.PI,o.sTouch={x:0,y:0},o.cTouch={x:0,y:0},o.sTime=0,o.nav_position=0,o.percent_open=0,o.nav_moving=!1,o.init()}var e="okayNav",t={parent:"",toggle_icon_class:"okayNav__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(){}};i.extend(n.prototype,{init:function(){var n=this;i("body").addClass("okayNav-loaded"),n.navigation.addClass("okayNav loaded").children("ul").addClass("okayNav__nav--visible"),n.options.align_right?n.navigation.append('<ul class="okayNav__nav--invisible transition-enabled nav-right" />').append('<a href="#" class="'+n.options.toggle_icon_class+' okay-invisible">'+n.options.toggle_icon_content+"</a>"):n.navigation.prepend('<ul class="okayNav__nav--invisible transition-enabled nav-left" />').prepend('<a href="#" class="'+n.options.toggle_icon_class+'...

CSS

*{box-sizing:border-box}*:before,*:after{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',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 200ms cubic-bezier(.55,0,.1,1);color:#30acff;font-size:3rem}.ok-header__logo:hover{color:#546edb}body.okayNav-loaded{overflow-x:hidden}.okayNav:not(.loaded){visibility:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.okayNav ul{float:left}.okayNav a{color:#2e2e33;font-size:1.4rem;font-weight:bold;position:relative;z-index:1}.okayNav__nav--visible{overflow:hidden;white-space:nowrap}.okayNav__nav--visible li{display:inline-block}.okayNav__nav--visible a{display:block;transition:color 200ms cubic-bezier(0.55,0,0.1,1);padding:15px 15px}.okayNav__nav--visible a:hover{color:#546edb}.okayNav__nav--invisible{position:fixed;top:70px;bottom:0;overflow-y:scroll;-webkit-overflow-scrolling:touch;background:#fff}.okayNav__nav--invisible a{background:#fff;width:240px;display:block;padding:15px}.okayNav__nav--invisible.nav-left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.okayNav__nav--invisible.nav-right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.okayNav__nav--invisible.transition-enabled{transition:-webkit-transform 400ms cubic-bezier(0.55,0,0.1,1);transition:transform 400ms cubic-bezier(0.55,0,0.1,1);transition:transform 400ms...