Menu Navigation Bar OkayNav

Menu Navigation Bar Okay Nav

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

Menu OkayNav ini menggunakan 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 menu ini, bisa liat di link demo berikut ini


Baca Juga

Cara Membuat Menu Bar Di Blogger

Untuk membuat menu navigation okaynav di blogger kalian bia ikuti langkah demi langkah pada tutorial dibawah ini

  • Login ke akun blogger kalian
  • Setelah login, masuk ke menu Template → Edit HTML
  • Setelah masuk Edit Html, kalian cari kode </body>
  • Setelah ketemu, masukan kode dibawah ini tepat 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 kode </head>, kalo udah ketemu masukan css dibawah ini tepat 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 langsung di Edit HTML templatenya, sebagai contoh kita coba pasang di dalam body
  • Kalian cari kode <body> atau <body kalo ga ada coba </head>
  • Kalo sudah ketemu, kalian Copy dan masukan HTML dibawha ini tepat di bawah kode <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 kode dibawah ini tepat 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 tentang Tutorial Cara Membuat Menu Navigation Bar Responsive Di Blogger ini semoga bermanfaat, apabila ada yang mau ditanyakan silahkan bertanya di kolom komentar :)

2 komentar
  1. Ozik JarwoMay 20, 2017 at 8:06 PM

    JSnya yg dihost di googledrive mati ya?

    ReplyDelete
    Replies
    1. Mas TamvanMay 20, 2017 at 10:36 PM

      Sudah saya perbaiki gan, thank atas infonya :) (y)

      Delete