Menu Horizontal Responsive Dengan Overflow List Menjadi Drop Down

Jika Anda kurang mengerti dengan judul postingannya, silahkan lihat gif animasi pada thumbnail post di atas.

Menu horizontal menyerupai itu sekarang dipakai oleh template-template gres default Blogger. Cukup menarik bukan?

Karena itu, lalu aku mencoba menciptakan sajian horizontal responsive overflow list menjadi dropdown menyerupai yang dipakai template gres default Blogger biar dapat dipakai juga oleh pengguna template custom.

Demonya menyerupai terlihat pada blog dengan template default Blogger berikut ini, sajian yang atas ialah sajian bawaan template gres Blogger, sedangkan sajian yang kedua itu sajian yang aku buat. Silahkan coba resize browsernya atau silahkan coba gunakan responsive tool.

DEMO

Bagaimana, tertarik untuk mencobanya juga?

Silahkan gunakan kode-kode di bawah ini.

Simpan arahan CSS berikut di atas arahan </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>

Kemudian simpan arahan javascript berikut di atas arahan </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>

Kemudian gunakan arahan HTML menyerupai di bawah ini untuk menampilkan menunya.

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

Dan pastikan Anda sudah menyimpan jquery library pada template blog Anda berapa pun versinya.

Selamat mencoba.
Sumber https://www.kompiajaib.com/

Share this post