logo blog

Membuat Responsive Menu Navigation Bar Scrolling

Membuat Responsive Menu Navigation Bar Scrolling

Membuat Responsive Menu Navigation Bar Scrolling

Cara Membuat Responsive Menu Navigation Bar Scrolling Di Blog

Membuat Menu Bar Navigation Responsive Dengen Efek Scroll Horizontal

Kali ini saya akan share sebuah menu navigation responsive dengan efek animation scroll horizontal. Sebelumnya saya juga pernah update menu navigation scroll pada menu drop downnya. bagi kalian yang ingin melihatnya, silahkan kunjungi Menu Navigation Bar Scroll Drop Down

Tapi pada menu bar yang satu ini tidak dilengkapi dengan menu drop down, kalo ingin memasang drop down silahkan d otak atik lagi ya :)

Untuk melihat demo dari tampilan menu ini, silahkan kunjungi link dibawah ini.

jangan lupa mampr ke postingan lainnya ya :)



Nah sekarang masuk ke tutorial pemasangannya.
Bahan Bahan Yang harus ada di template.
Template kalian harus sudah terpasang :
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
Dan
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Kalau sudah ada lewati tapi kalo belum silahkan dipasang tepat diatas </head>

Responsive Scrolling Menu Navigation Bar

  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya.



#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; }



  • Selanjutnya, cari kode </body> lalu masukan javascript dibawah ini tepat diatasnya.


<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 copy HTML dibawah ini lalu masukan kode ini di bawah </header>. Atau terserah kalian mau ditaro dimana.


<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>


  • Tinggal Save Dan Lihat hasilnya. Salam Tamvan.
Cukup sekian artikel tentang cara membuat menu scroll responsive ini, semoga bermanfaat apa bila ada yang mau ditanyakan komen aja :)

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Responsive Menu Navigation Bar Scrolling. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Responsive Menu Navigation Bar Scrolling. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

Comment Loading