Cara Membuat Menu Bar Dengan Gaya Slide Responsive

komputerdia.com - Gaya menu bar atau menu navigasi yang akan saya jelaskan pada artikel kali ini, memang berbeda dari menu bar lainnya. Apa yang membuat perbedaannya? Pada pembuatan menu bar kali ini saya akan mencoba memberikan sedikit sentuhan gaya slide ketika kursor kalian diarahkan pada icon panah.

Untuk melengkapi pengetahuan kalian tentang variasi menu bar lainnya yang dapat kalian pasang di blog, kalian dapat membaca ulasan tersebut pada artikel terkait dibawah ini.

Baca Juga :

Cara Membuat Menu Bar Dengan Gaya Slide Responsive

Langkah - Langkah Membuat Menu Bar Slider
  • Pertama silahkan kalian masuk ke akun blogger kalian
  • Masuk ke menu template atau thema dan cari kode </head>, kemudian tempelkan kode dibawah ini tepat diatas kode </head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  • Perlu diperhatikan, jika pada template kalian telah terdapat kedua kode diatas, maka kode tersebut jangan kalian pasang lagi
  • Selanjutnya kalian cari kode ]]></b:skin> , dan tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> .
#main {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}


#navMenu {
  background: #222;
  position: relative;
  border-radius: 6px;
  font-family: 'Roboto', sans-serif;
}
#navMenu #navMenu-wrapper {
  overflow: hidden;
  height: 60px;
  padding: 0 30px;
}
#navMenu-items {
  margin: 1px 20px;
  padding: 1px 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#menuSelector {
  position: relative;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}
#navMenu ul li {
    display: inline-block;
    height: 60px;
    margin: 0px;
    box-shadow: 1px 0px 0px rgb(51, 51, 51) inset;
    border-left: 1px solid rgb(0, 0, 0);
}
#navMenu ul li a {
    color: #FAFAFA;
    padding: 0px 15px !important;
    line-height: 44px;
}
.slick-prev, .icon-chevronleft { transform: rotate(180deg); }
.icon-chevronleft, .icon-chevronright {
  background-image: url('http://www.jqueryscript.net/demo/Responsive-Scrolling-Navigation-Menu-With-jQuery-jQuery-UI/arrow.png');
  background-repeat: no-repeat;
  background-size: 20px;
}
.navMenu-paddle-left, .navMenu-paddle-right {
  cursor: pointer;
  border: none;
  position: absolute;
  top: 20px;
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}
.slick-prev, .navMenu-paddle-left { left: 0; }
.arrow {
  width: 25px;
  margin-left: auto;
  margin-right: auto;
}
.slick-next, .navMenu-paddle-right { right: 0; }
  • Lalu kalian cari kode </body>, dan tempatkan kode dibawah ini tepat diatas kode </body> .
<script>
$(function() {
  var items = $('#navMenu-items').width();
  var itemSelected = document.getElementsByClassName('navMenu-item');
  navPointerScroll($(itemSelected));
  $("#navMenu-items").scrollLeft(200).delay(200).animate({
    scrollLeft: "-=200"
  }, 2000, "easeOutQuad");
 
  $('.navMenu-paddle-right').click(function () {
    $("#navMenu-items").animate({
      scrollLeft: '+='+items
    });
  });
  $('.navMenu-paddle-left').click(function () {
    $( "#navMenu-items" ).animate({
      scrollLeft: "-="+items
    });
  });

  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var scrolling = false;

    $(".navMenu-paddle-right").bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("right");
    }).bind("mouseout", function(event) {
        scrolling = false;
    });

    $(".navMenu-paddle-left").bind("mouseover", function(event) {
        scrolling = true;
        scrollContent("left");
    }).bind("mouseout", function(event) {
        scrolling = false;
    });

    function scrollContent(direction) {
        var amount = (direction === "left" ? "-=3px" : "+=3px");
        $("#navMenu-items").animate({
            scrollLeft: amount
        }, 1, function() {
            if (scrolling) {
                scrollContent(direction);
            }
        });
    }
  }
  
  $('.navMenu-item').click(function () {
    $('#navMenu').find('.active').removeClass('active');
    $(this).addClass("active");
    navPointerScroll($(this));
  });

});

function navPointerScroll(ele) {

  var parentScroll = $("#navMenu-items").scrollLeft();
  var offset = ($(ele).offset().left - $('#navMenu-items').offset().left);
  var totalelement = offset + $(ele).outerWidth()/2;

  var rt = (($(ele).offset().left) - ($('#navMenu-wrapper').offset().left) + ($(ele).outerWidth())/2);
  $('#menuSelector').animate({
    left: totalelement + parentScroll
  })
}
  </script>
  • Langkah terakhir, silahkan kalian cari kode </header> , dan letakkan kode berikut dibawah kode </header> .
<div id='main'>
  <div id="main2">
    <div id="navMenu">
      <div id="navMenu-wrapper">
        <ul id="navMenu-items" style="">
          <div id="menuSelector"></div>
          <li class="navMenu-item active"> <a href="#">Home</a> </li>
          <li class="navMenu-item"> <a href="#">Templates</a> </li>
          <li class="navMenu-item"> <a href="#">Widget</a> </li>
          <li class="navMenu-item"> <a href="#">Javascript</a> </li>
          <li class="navMenu-item"> <a href="#">Jquery</a> </li>
          <li class="navMenu-item"> <a href="#">HTML dan CSS</a> </li>
          <li class="navMenu-item"> <a href="#">Contact</a> </li>
          <li class="navMenu-item"> <a href="#">About</a> </li>
          <li class="navMenu-item"> <a href="#">RSS</a> </li>
          <li class="navMenu-item"> <a href="#">Social Media</a> </li>
          <li class="navMenu-item active"> <a href="#">Navmenu </a> </li>
        </ul>
        <div class="navMenu-paddles">
          <button class="navMenu-paddle-left icon-chevronleft" aria-hidden="true"> </button>
          <button class="navMenu-paddle-right icon-chevronright" aria-hidden="true"> </button>
        </div>
      </div>
    </div>
  </div>
</div>
  • Setelah semua kode telah kalian atur, silahkan kalian tekan tombol simpan atau save .
  • Lihat hasilnya, jika kalian berhasil maka tampilan menu tersebut akan tampak seperti contoh dibawah ini
Cara Membuat Menu Bar Dengan Gaya Slide Responsive
  • Selesai dan semoga bermanfaat untuk kalian semuanya

Sumber Referensi : https://mastamvan.blogspot.co.id/
.
.

Berlangganan Artikel terbaru (free):

Post a Comment