Cara Membuat Menu Horizontal Responsive Menjadi Dropdown

Dipostingan kali ini akan membahas lanjutan dari postingan sebelumnya yang pernah kita bahas Cara Membuat Tab View kali ini akan kita bahas dengan cara yang lain membuat menu. Sepertinya sudah tidak asing lagi ditelinga kita bahwa sebagian besar website atau blog yang ada pasti menggunakan menu menu dalam halamannya seperti yang Google Blogger inovasi sekarang ini kalau kita perhatikan di template bawaan blogger yang baru ada banyak tampilan yang sudah responsive dan cukup bagus juga untuk dipakai.

Terkait postingan kali ini kita akan membahas Cara Membuat Menu Horizontal Responsive Menjadi Dropdown yang diadopsi dari tampilan menu bawaan template Blogger yang baru, disini akan kita modifikasi menunya dibuat Horizontal memanjang saat tampilan di PC namun akan menyesuaikan jika di akses dari smart phone akan responsive dan tampilannya berubah menjadi menu drop down overflow list, jadi buat sobat yang masih suka dengan tampilan menu dari template bawaan blogger dan mau mencobanya mari kita sima bersama langkah berikut ini.

Langkah Pertama
Sebelum memulai pastikan di template sobat sudah terpasang Jquery Library berapa pun versinya.


Langkah Ke Dua
Silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode </head>.

<style type='text/css'>
/*<![CDATA[*/
nav#menu-overflow {
  background: #fff;
  max-width: 100%;
    overflow-x: auto;
}
nav#menu-overflow ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav#menu-overflow ul li {
  float: left;
  list-style: none;
  font: 700 12px lato, arial;display: list-item;
}
nav#menu-overflow ul li.more {
  height:45px;
  line-height:45px;
  text-align: center;
  display: none;
  float: right
}
nav#menu-overflow ul li.more ul#overflow.show {
  display: block;
}
nav#menu-overflow ul li a,
nav#menu-overflow ul li span,
nav#menu-overflow ul li.more span.btnmore {
  display: block;
  background: #fff;
  color: #333;
  text-decoration: none;
  padding:0 1em;
  cursor: pointer;
  transition-duration: .3s;
  height:45px;
  line-height:45px;
}
nav#menu-overflow ul li a:hover,
nav#menu-overflow ul li span:hover {
  background: #e00;
  color: #fff;
}
nav#menu-overflow ul li.more #overflow {
  display: none;
  position: absolute;
  text-align: left;
  transition-duration: .3s;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  background-color: #ffffff;
  z-index: 9999;
}
nav#menu-overflow ul li.more #overflow li {
  float: none;
}
nav#menu-overflow ul li.more #overflow li a {
  background: #fff;
  white-space: nowrap;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
}
nav#menu-overflow ul li.more #overflow li a:hover {
  background: #e00;
}
nav#menu-overflow ul li.more span.btnmore {
  background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;
  height: 100%
}
/*]]>*/
</style>

Langkah Ke Tiga
Silahkan salin kode Javascript dibawah ini lalu letakkan di atas kode </body>.

<script>
//<![CDATA[
window.onresize = navigationResize;
navigationResize();
function navigationResize() {
  $('#nav li.more').before($('#overflow > li'));
  var $navItemMore = $('#nav > li.more'),
    $navItems = $('#nav > li:not(.more)'),
    navItemMoreWidth = navItemWidth = $navItemMore.width(),
    windowWidth = $(window).width(),
    navItemMoreLeft, offset, navOverflowWidth;
  $navItems.each(function() {
    navItemWidth += $(this).width();
  });
  navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
  while (navItemWidth > windowWidth) {
    navItemWidth -= $navItems.last().width();
    $navItems.last().prependTo('#overflow');
    $navItems.splice(-1, 1);
  }
  navItemMoreLeft = $('#nav .more').offset().left;
  navOverflowWidth = $('#overflow').width();
  offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
  $('#overflow').css({
    'left': offset
  });
}
function showOverflow() {
  document.getElementById("overflow").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.btnmore')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
//]]>
</script>

Langkah Ke Empat
Silahkan sobat gunakan kode HTML dibawah ini agar menunya tampil.

<nav id="menu-overflow">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Menu 7</a></li>
    <li><a href="#">Menu 8</a></li>
    <li class="more">
      <span onclick="showOverflow()" class="btnmore"></span>
      <ul id="overflow" class="dropdown-content"></ul>
    </li>
  </ul>
</nav>

Perhatikan setiap langkah dalam penerapan kodenya, ada baiknya dibackup terlebih dahulu templatednya antisipasi jika terjadi error, silahkan SAVE dan selesai selamat mencoba.