Menu merupakan suatu elemen yang wajib ada pada setiap website, secara definisi menu adalah salah satu bagian dari website yang berisikan link-link aktif yang mengarah pada halaman tertentu pada website. Fungsi nya adalah tidak lain untuk mempermudah dalam navigasi pada website itu sendiri dan biasa nya letak menu pada website ada dibagian atas atau dibagian bawah website. Ada beragam jenis menu yang bisa kita temukan pada setiap website, sebagai contoh, ada menu dropdown, menu sidebar dan masih banyak lagi. Seperti pada judul diatas saya akan kasih tutorial bagaimana Cara Membuat Menu Dropdown dengan jQuery. Simak langkah-langkah nya berikut ini.

Untuk membuat menu dropdown kita akan menggunakan tag ul li untuk mempermudah dalam pengembangan nya, Silahkan ketikan sintak HTML berikut untuk membuat struktur menu dropdown.

<ul class="nav">
      <li><a href="#">Home</a></li>
      <li class="button-dropdown"><a href="javascript:void(0)" class="dropdown-toggle">Product <span>▼</span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Product 1</a></li>
          <li><a href="#">Product 2</a></li>
          <li><a href="#">Product 3</a></li>
        </ul>
      </li>
      <li><a href="#">Service</a></li>
      <li class="button-dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle">
          Blog <span>▼</span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Blog 1</a></li>
          <li><a href="#">Blog 2</a></li>
          <li><a href="#">Blog 3</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>

Pada bagian tag li silahkan kalian bisa mengisikan nama menu yang diinginkan dan kalian bisa menambahkan sesuai kebutuhan. Setelah sintak HTML diketikan selanjutnya, kita berikan style untuk menu dropdown agar terlihat cantik dengan sintak CSS3 berikut.

body {
    background-color: #071A29;
    text-align: center;
    padding-top: 50px;
}

.nav {
    display: block;
    font: 13px Helvetica, Tahoma, serif;
    text-transform: uppercase;
    margin: 0; 
    padding: 0;
}

.nav li {
    display: inline-block;
    list-style: none;
}

.nav .button-dropdown {
    position: relative;
}

.nav li a {
    display: block;
    color: #333;
    background-color: #fff;
    padding: 10px 20px;
    text-decoration: none;
}

.nav li a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    color: #999;
}

.nav li a:hover, .nav li a.dropdown-toggle.active {
    background-color: #FF4C48;
    color: #fff;
}

.nav li a:hover span, .nav li a.dropdown-toggle.active span {
    color: #fff;
}

.nav li .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    margin-top: 3px;
    text-align: left;
}

.nav li .dropdown-menu.active {
    display: block;
}

.nav li .dropdown-menu a {
    width: 150px;
}
.dropdown-menu {
    border-radius: 0px;
    min-width: 0px;
}

Untuk membuat fungsi agar menu dropdown bisa dklik ketikan sintak javascript berikut.

jQuery(document).ready(function (e) {
    function t(t) {
        e(t).bind("click", function (t) {
            t.preventDefault();
            e(this).parent().fadeOut()
        })
    }
    e(".dropdown-toggle").click(function () {
        var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
        e(".button-dropdown .dropdown-menu").hide();
        e(".button-dropdown .dropdown-toggle").removeClass("active");
        if (t) {
            e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
        }
    });
    e(document).bind("click", function (t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
    });
    e(document).bind("click", function (t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
    })
});

Setelah semua sintak diatas diketikan semua, simpan file dengan format .html kemudian jalankan pada browser masing-masing dan lihat hasil nya, maka akan terlihat menu dan apabila salah satu menu dklik akan tampil dropdown.

Baik itulah tutorial mengenai bagaimana Cara Membuat Menu Dropdown dengan jQuery. semoga bermanfaat, selamat mencoba…

Untuk lebih jelas bisa buka link demo dibawah ini.

DEMO