Membuat Dropdown Menu Responsive Dengan Effect Float

Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float.

Kebetulan menu ini basicnya saya gak tau dari mana, yang pasti menunya ini saya dapat dari salah satu blog saya lupa namanya, maaf jika ada yang merasa pembuat menu ini bisa mengabarkan saya.
Pada dasarnya menu ini hanya berbentuk sebuah daftar menu (listed/li) yang di inline-block biasa dan posisinya statis yang artinya tidak bergerak. Nah, disini kita akan mencoba membuat menu ini dapat bergerak dalam posisi tertentu, yang artinya posisi awal menu berada bawah header namun setelah kita scroll kebawah dan kita melewati menu otomatis si menu bakal nempel diatas dan gak bakal lepas sampai kamu scroll lagi balik keatas. Silahkan klik link dibawah.

Demo

Coba di scroll saja ke bawah dan lihat menu yang dibawah header otomatis mengikuti.

Disini kita akan menggunakan sedikit jQuery, jadi pastikan kamu sudah memasang library jQuery, jika belum kamu bisa taruh kode dibawah ini diatas </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Namun jika sudah dipasang, abaikan saja.
Selanjutnya kita akan membuat CSSnya dulu. Salin CSS dibawah ini kedalam <style>...</style>
 

.menu {background: #4B304E;border-bottom:1px solid #2B304E;width: 100%;text-align:center;z-index: 9999}
.menu.nempel {position: fixed;top:0}
#menu1 {display: block;margin-top: 0;background: #aaa;}
.menu {display: block}
.menu li {text-align:left;display: inline-block;position: relative;z-index: 100;}
.menu li:first-child {margin-left: 0;}
.menu li a {font-weight: 400;text-decoration: none;padding: 10px 15px;display: block;color: #EC7263;transition: all 0.2s ease-in-out 0s;}
.menu li a:hover,.menu li:hover>a {color: #fff;background: #533557}
.menu ul {visibility: hidden;opacity: 0;margin: 0;padding: 0;width: 150px;position: absolute;left: 0px;background: #fff;box-shadow: 1px 1px 2px rgba(0,0,0,0.4);z-index: 99;transform: translate(0,-10px);transition: all 0.2s ease-out;}
.menu ul li {display: block;float: none;background: none;margin: 0;padding: 0;}
.menu ul li a {font-size: 12px;font-weight: normal;display: block;color: #666;background: #fff;}
.menu ul li a:hover,.menu ul li:hover>a {background: #eee;color:#666;}
.menu li:hover>ul {visibility: visible;opacity: 1;transform: translate(0,0);}
.menu ul ul {left: 149px;top: 0px;visibility: hidden;opacity: 0;transform: translate(0,-10px);transition: all .3s ease-out;}
.menu ul ul:after {left: -6px;top: 10%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(255, 255, 255, 0);border-right-color: #fff;border-width: 6px;margin-top: -6px;}
.menu li>ul ul:hover {visibiity: visible;opacity: 1;transform: translate(0,0);}
.responsive-menu {display: none;width: 100%;padding: 20px 15px;background: #ddd;color: #333;text-transform: uppercase;font-weight: 600;border-bottom: 1px solid #aaa;transition: .3s}
.responsive-menu:hover {background: #eee;color: #333;text-decoration: none;}

Kode yang bertanda merah (.menu.nempel) tidak akan berfungsi sebelum kita menaruhkan jQuerynya. Sebelum kita menaruh jQuerynya, kita taruh dulu HTML berikut.

<nav class='menu1' id='menu1' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-bars'/> Menu</a>    
    <ul class='menu'>
      <li><a href='/'>HOME</a></li> 
      <li><a href='http://id-mufcnews.blogspot.co.id/p/blog-page_16.html'>STATIC PAGE</a></li>
      <li><a href='http://id-mufcnews.blogspot.co.id/404'>ERROR 404</a></li>
      <li><a href='#'>HOSTING</a>
        <ul class='sub-menu'>
   <li><a href='#'>250 mb</a></li>
   <li><a href='#'>Bundling</a>
     <ul>
              <li><a href='#'>Website + 1000mb</a></li>
              <li><a href='#'>Website + 1500mb</a></li>
              <li><a href='#'>Website + Unlimited + .com</a></li>
            </ul>
          </li>
       </ul>
     </li>
     <li><a href='#'>OTHER</a>
 <ul class='sub-menu'>
   <li><a href='#'>Contact Us</a></li>
   <li><a href='#'>Affiliate</a></li>
   <li><a href='#'>Job</a></li>
 </ul>
     </li>
   </ul>
</nav> 

Dimana kode diatas ditaruh ? Sebenarnya peletakan beberapa baris kode seperti yang diatas tidaklah mutlak asalkan tetap berada didalam <body>...</body> itu tergantung anda ingin menaruhnya dimana, jika anda ingin menaruhnya diatas header bisa taruh diatas <header>, tapi kalau mau menaruhnya dibawah header bisa ditaruh dibawah </header>, cukup logis bukan ?

Kemudian kita akan menaruh jQuery yang isinya sebagai berikut diatas </body>.

 <script>
  $(window).scroll(function(){
    var jarak=$(this).scrollTop();

  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
});
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
</script>

Untuk kode yang merah itu berfungsi untuk menambah dan menghapus class, itulah yang akan otomatis menambah class .menu menjadi .menu.nempel, nah diatas tadi kita sudah membuat sebuah class dalam CSS yang berisi .menu.nempel {position:fixed;...} , nah sudah jelas jika sebuah elemen diberi property position dan diberi value fixed otomatis elemen tidak lagi berada/terkurung didalam sebuah container namun dia posisiya lebih fleksibel karena dia sekarang posisinya mengikuti posisi window, kemanapun anda scrolling (kebawah/keatas) elemen tersebut akan ikut, begitu sederhananya. Namun kita sudah memasang sebuah perintah dalam kondisi tertentu dalam baris kode

  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }

Jika kita membacanya secara bahasa manusia isinya bisa berarti

Aku        : jQuery, jika jarak berada lebih dari (melewati) .menu1 (pembungkus menu) maka jalankanlah fungsi berikut
jQuery    : Apa fungsinya ?
Aku        : Tambahkan .nempel pada .menu (menjadi .menu.nempel)

Nah diatas adalah perintah pertama, kemudian kita tambah lagi dibawahnya perintah hilangkan class supaya dia kembali keposisi semula.

Aku : jQuery, jika jarak berada kurang dari (sebelum/diatas) .menu1 hilangkanlah .nempel (menjadi .menu saja)

Sebagai informasi, sebelumnya kita sudah membuat variabel jarak yang berisi "Seberapa jauh jarak kita scroll ke bawah dari atas yang didefinisikan dalam bentuk angka". Sebenarnya kita dapat melihat angka tersebut melalui console log, namun kita tidak penting untuk tau karena yang jalankan fungsi adalah jQuery :D.

$(window).scroll(function(){
    var jarak=$(this).scrollTop();

$(this) sama saja dengan selector yang dimaksud, atau dalam kasus ini $(this)=$(window).

Sebenarnya $('.menu1').offset().top -1 itu menghasilkan sebuah angka (namun kita hanya bisa melihatnya dengan console log), yang artinya seberapa jauh jarak dari atas ke .menu1, karena kita menggunakan offset().top-1 maka artinya menjadi "seberapa jauh jarak dari atas ke .menu1 dikurangi 1". (seandainya jaraknya adalah 300, maka akan dikurangi menjadi 299), saya harap dapat dipahami karena saya bukan expert jQuery jadi mohon dikoreksi jika salah.

Responsive Menu

Untuk kode orange itu adalah kode yang membuat si menu tadi menjadi responsive tepatnya saat ukuran window browser 767px, saat itu dia akan menjalankan #resp-menu dan mengubah menu yang inline-block tadi kedalam sebuah toggle. Toggle itu yang 4 nomor itu loh =D. Dalam jQuery toggle itu fungsinya memunculkan dan menyembunyikan elemen tertentu. Yang artinya menu akan disembunyikan dan akan dimunculkan jika ditekan tombol togglenya.

Selesai, sekali lagi saya juga masih proses belajar jquery ini :D, jadi penjelasan saya masih kelas pemula, jika ada yang salah tolong dikoreksi.
Sekian dan terima kasih.

Saya lupa menu responsive ini menggunakan font awesome, satu aja sih :D tapi dipasang aja font awesomenya gan

Artikel Terkait