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 gila lagi ditelinga kita bahwa sebagian besar website atau blog yang ada pasti menggunakan menu menu dalam halamannya menyerupai yang Google Blogger inovasi sekarang ini kalau kita perhatikan di template bawaan blogger yang gres ada banyak tampilan yang sudah responsive dan cukup indah 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 dikala tampilan di PC namun akan menyesuaikan jikalau di jalan masuk dari smart phone akan responsive dan tampilannya bermetamorfosis menu drop down overflow list, jadi buat sahabat 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 sahabat sudah terpasang Jquery Library berapa pun versinya.


Langkah Ke Dua
Silahkan sahabat salin isyarat CSS dibawah ini lalu letakkan diatas isyarat </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 isyarat Javascript dibawah ini lalu letakkan di atas isyarat </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 sahabat gunakan isyarat HTML dibawah ini biar 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 jikalau terjadi error, silahkan SAVE dan tamat selamat mencoba.