Cara Membuat Menu Dropdown dengan jQuery

Fitur adalah suatu faktor yang wajib ada di setiap laman, secara definisi fitur yakni diantara bagian dari laman yang berisikan link-link aktif yang mengarah di halaman tertentu di laman. Manfaat nya yakni tak lain bagi mempermudah pada navigasi di laman itu sendiri dan lazim nya letak fitur di laman ada dibagian atas atau dibagian bawah laman. Ada beragam jenis fitur yang dapat kita dapatkan di setiap laman, selaku contoh, ada fitur dropdown, fitur sidebar dan masih banyak lagi. Seperti di judul diatas saya akan kasih panduan bagaimana Cara Membuat Menu Dropdown dengan jQuery. Simak strategi nya berikut ini.

Bagi merancang fitur dropdown kita akan menggunakan tag ul li bagi mempermudah pada pengembangan nya, Silahkan ketikan sintak HTML berikut bagi merancang struktur fitur 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>

Di bagian tag li silahkan kalian dapat mengisikan nama fitur yang diinginkan dan kalian dapat menambahkan sesuai keperluan. Setelah sintak HTML diketikan berikutnya, kita berikan style bagi fitur 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;
}

Bagi merancang manfaat agar fitur dropdown dapat 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 segala sintak diatas diketikan segala, simpan file dengan format .html kemudian jalankan di browser masing-masing dan lihat hasil nya, karenanya akan terlihat fitur dan apabila diantara fitur dklik akan tampil dropdown.

Bagus demikianlah panduan mengenai bagaimana Cara Membuat Menu Dropdown dengan jQuery. semoga bermanfaat, selamat mencoba…

Bagi lebih jelas dapat buka link demo dibawah ini.

DEMO

Sumber https://kursuswebsite.org