Menu Navigation Kafe Okaynav

Cara Membuat Menu Navigation Bar Responsive dengan Menu OkayNav. Kali ini saya akan menawarkan tutorial memasnag sajian kafe keren di blogger yang tampilannya cukup simple dan tentunya responsive

Menu OkayNav ini memakai plugin jquery jadi buat kalian yang di templatenya belum menambahkan jquery library maka menunya tikdakn akan berjalan dengan baik.

Buat yang ingin melihat tampilan dari sajian ini, dapat liat di link demo berikut ini

Result

Baca Juga

• Kumpulan Menu Navigation Bar Responsive Untuk Blogger

• Mega Menu Navigation With Thumbnail

• Menu Bar Dengan Efek Animasi Pada Dropdownnya

Cara Membuat Menu Bar Di Blogger

Untuk menciptakan sajian navigation okaynav di blogger kalian bia ikuti langkah demi langkah pada tutorial dibawah ini

• Login ke akun blogger kalian

• Setelah login, masuk ke sajian Template → Edit HTML

• Setelah masuk Edit Html, kalian cari isyarat </body>

• Setelah ketemu, masukan isyarat dibawah ini sempurna diatasnya

 <script type='text/javascript'> //<![CDATA[ !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+' okay-invisible">'+n.options.toggle_icon_content+"</a>"),n.nav_visible=n.navigation.children(".okayNav__nav--visible"),n.nav_invisible=n.navigation.children(".okayNav__nav--invisible"),n.toggle_icon=n.navigation.children("."+n.options.toggle_icon_class),n.toggle_icon_width=n.toggle_icon.outerWidth(!0),n.default_width=n.getChildrenWidth(n.navigation),n.parent_full_width=i(n.options.parent).outerWidth(!0),n.last_visible_child_width=0,n.initEvents(),n.nav_visible.contents().filter(function(){return this.nodeType=Node.TEXT_NODE&&/\S/.test(this.nodeValue)===!1}).remove(),1==n.options.swipe_enabled&&n.initSwipeEvents()},initEvents:function(){var n=this;n.document.on("click.okayNav",function(e){var t=i(e.target);n.nav_open===!0&&0==t.closest(".okayNav").length&&n.closeInvisibleNav(),e.target===n.toggle_icon.get(0)&&(e.preventDefault(),n.toggleInvisibleNav())});var e=n._debounce(function(){n.recalcNav()},n.options.resize_delay);n.window.on("load.okayNav resize.okayNav",e)},initSwipeEvents:function(){var n=this;n.document.on("touchstart.okayNav",function(e){if(n.nav_invisible.removeClass("transition-enabled"),1==e.originalEvent.touches.length){var t=e.originalEvent.touches[0];(t.pageX<25&&0==n.options.align_right||t.pageX>i(n.options.parent).outerWidth(!0)-25&&1==n.options.align_right||n.nav_open===!0)&&(n.sTouch.x=n.cTouch.x=t.pageX,n.sTouch.y=n.cTouch.y=t.pageY,n.sTime=Date.now())}}).on("touchmove.okayNav",function(i){var e=i.originalEvent.touches[0];n._triggerMove(e.pageX,e.pageY),n.nav_moving=!0}).on("touchend.okayNav",function(i){n.sTouch={x:0,y:0},n.cTouch={x:0,y:0},n.sTime=0,n.percent_open>100-n.options.threshold?(n.nav_position=0,n.closeInvisibleNav()):1==n.nav_moving&&(n.nav_position=n.nav_invisible.width(),n.openInvisibleNav()),n.nav_moving=!1,n.nav_invisible.addClass("transition-enabled")})},_getDirection:function(i){return this.options.align_right?i>0?-1:1:0>i?-1:1},_triggerMove:function(i,n){var e=this;e.cTouch.x=i,e.cTouch.y=n;var t=Date.now(),o=e.cTouch.x-e.sTouch.x,a=e.cTouch.y-e.sTouch.y,s=a*a,l=Math.sqrt(o*o+s),v=Math.sqrt(s),r=Math.asin(Math.sin(v/l))*e.radCoef;l/(t-e.sTime);if(e.sTouch.x=i,e.sTouch.y=n,20>r){var c=e._getDirection(o),d=e.nav_position+c*l,_=e.nav_invisible.width(),p=0;0>d?p=-d:d>_&&(p=_-d);var u=_-(e.nav_position+c*l+p),g=u/_*100;e.nav_position+=c*l+p,e.percent_open=g,e.nav_invisible.css("transform","translateX("+(e.options.align_right?1:-1)*g+"%)")}},getParent:function(){return this.options.parent},getVisibleNav:function(){return this.nav_visible},getInvisibleNav:function(){return this.nav_invisible},getNavToggleIcon:function(){return this.toggle_icon},_debounce:function(i,n,e){var t;return function(){var o=this,a=arguments,s=function(){t=null,e||i.apply(o,a)},l=e&&!t;clearTimeout(t),t=setTimeout(s,n),l&&i.apply(o,a)}},openInvisibleNav:function(){var i=this;i.options.enable_swipe?"":i.options.beforeOpen.call(),i.toggle_icon.addClass("icon--active"),i.nav_invisible.addClass("nav-open"),i.nav_open=!0,i.nav_invisible.css({"-webkit-transform":"translateX(0%)",transform:"translateX(0%)"}),i.options.afterOpen.call()},closeInvisibleNav:function(){var i=this;i.options.enable_swipe?"":i.options.beforeClose.call(),i.toggle_icon.removeClass("icon--active"),i.nav_invisible.removeClass("nav-open"),i.options.align_right?i.nav_invisible.css({"-webkit-transform":"translateX(100%)",transform:"translateX(100%)"}):i.nav_invisible.css({"-webkit-transform":"translateX(-100%)",transform:"translateX(-100%)"}),i.nav_open=!1,i.options.afterClose.call()},toggleInvisibleNav:function(){var i=this;i.nav_open?i.closeInvisibleNav():i.openInvisibleNav()},getChildrenWidth:function(n){for(var e=0,t=i(n).children(),o=0;o<t.length;o++)e+=i(t[o]).outerWidth(!0);return e},getVisibleItemCount:function(){return i("li",this.nav_visible).length},getHiddenItemCount:function(){return i("li",this.nav_invisible).length},recalcNav:function(){var n=this,e=i(n.options.parent).outerWidth(!0),t=n.getChildrenWidth(n.options.parent),o=n.navigation.outerWidth(!0),a=n.getVisibleItemCount(),s=n.nav_visible.outerWidth(!0)+n.toggle_icon_width,l=t+n.last_visible_child_width+n.toggle_icon_width,v=t-o+n.default_width;return e>v?(n._expandAllItems(),void n.toggle_icon.addClass("okay-invisible")):(a>0&&s>=o&&l>=e&&n._collapseNavItem(),e>l+n.toggle_icon_width+15&&n._expandNavItem(),void(0==n.getHiddenItemCount()?n.toggle_icon.addClass("okay-invisible"):n.toggle_icon.removeClass("okay-invisible")))},_collapseNavItem:function(){var n=this,e=i("li:last-child",n.nav_visible);n.last_visible_child_width=e.outerWidth(!0),n.document.trigger("okayNav:collapseItem",e),e.detach().prependTo(n.nav_invisible),n.options.itemHidden.call(),n.recalcNav()},_expandNavItem:function(){var n=this,e=i("li:first-child",n.nav_invisible);n.document.trigger("okayNav:expandItem",e),e.detach().appendTo(n.nav_visible),n.options.itemDisplayed.call()},_expandAllItems:function(){var n=this;i("li",n.nav_invisible).detach().appendTo(n.nav_visible),n.options.itemDisplayed.call()},_collapseAllItems:function(){var n=this;i("li",n.nav_visible).detach().appendTo(n.nav_invisible),n.options.itemHidden.call()},destroy:function(){var n=this;i("li",n.nav_invisible).appendTo(n.nav_visible),n.nav_invisible.remove(),n.nav_visible.removeClass("okayNav__nav--visible"),n.toggle_icon.remove(),n.document.unbind(".okayNav"),n.window.unbind(".okayNav")}}),i.fn[e]=function(t){var o=arguments;if(void 0===t||"object"==typeof t)return this.each(function(){i.data(this,"plugin_"+e)||i.data(this,"plugin_"+e,new n(this,t))});if("string"==typeof t&&"_"!==t[0]&&"init"!==t){var a;return this.each(function(){var s=i.data(this,"plugin_"+e);s instanceof n&&"function"==typeof s[t]&&(a=s[t].apply(s,Array.prototype.slice.call(o,1))),"destroy"===t&&i.data(this,"plugin_"+e,null)}),void 0!==a?a:this}}}); //]]> </script> <script type="text/javascript">var navigation = $('#nav-main').okayNav();</script> 

• Sekarang kalian cari isyarat </head>, kalo udah ketemu masukan css dibawah ini sempurna diatasnya

 <style type='text/css'> #logomenu *{box-sizing:border-box} #logomenu *:before,*:after{box-sizing:inherit} #logomenu{-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;margin:0;padding:0;list-style:none} .okayNav a{color:#2e2e33;font-size:1.4rem;font-weight:bold;position:relative;z-index:1;text-decoration:none} .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 cubic-bezier(0.55,0,0.1,1),-webkit-transform 400ms cubic-bezier(0.55,0,0.1,1)} .okayNav__nav--invisible.nav-open{-webkit-transform:translateX(0);transform:translateX(0)} .okayNav__menu-toggle{position:relative;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 cubic-bezier(0.55,0,0.1,1),-webkit-transform 400ms cubic-bezier(0.55,0,0.1,1);cursor:pointer;width:40px;height:20px;float:left;z-index:1;top:15px} .okayNav__menu-toggle.okay-invisible{position:absolute;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none} .okayNav__menu-toggle span{display:block;position:absolute;margin:auto;height:4px;width:4px;background:#2e2e33;border-radius:50%;left:0;right:0;pointer-events:none} .okayNav__menu-toggle span:nth-child(1){top:0} .okayNav__menu-toggle span:nth-child(2){top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)} .okayNav__menu-toggle span:nth-child(3){bottom:0} .okayNav__menu-toggle.icon--active{-webkit-transform:rotate(90deg);transform:rotate(90deg)} .okayNav__menu-toggle.icon--active span{background:#546edb} </style> 

• Selanjutnya, tinggal pemasnagan HTMLnya

• Terserah kalian mau pasang dimana. Bisa kalian simpan lewat tataletak (HTML/Javascript) atau eksklusif di Edit HTML templatenya, sebagai pola kita coba pasang di dalam body

• Kalian cari isyarat <body> atau <body kalo ga ada coba </head>

• Kalo sudah ketemu, kalian Copy dan masukan HTML dibawha ini sempurna di bawah isyarat <body>

 <div id="logomenu">   <a class="site-logo" href="#">Logo</a>   <nav role="navigation" id="nav-main" class="okayNav">     <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> </div> 

• Kalo sudah, kalian tinggal save templatenya

Template kalian harus sudah terpasang jQuery library. Kalo belum tambahkan isyarat dibawah ini sempurna di atas </head>

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type="text/javascript"></script> 

Cukup sekian artikel wacana Tutorial Cara Membuat Menu Navigation Bar Responsive Di Blogger ini supaya bermanfaat, apabila ada yang mau ditanyakan silahkan bertanya di kolom komentar :)