Cara Membuat Menu Dropdown sederhana dengan Jquery

Ada beberapa cara untuk kita bisa membuat sebuah tampilan menu, khusus tampilan menu dropdown. yang paling sederhana adalah membuat menu dropdown dengan menggunakan CSS3, akan tetapi dengan berkembangnya teknologi saat ini banyak sekali cara yang bisa kita lakukan untuk membuat menu dropdown, mulai dengan framework ataupun dengan desain sendiri. Nah, berikut ini akan saya bagikan tutorial sederhana yakni cara membuat menu dropdown sederhana dengan jquery.

Seperti yang kita ketahui bahwa jquery merupakan library dari javascript yang sangat populer sekali saat ini, dengan library jquery ini kita akan lebih mudah dalam membuat kode-kode javascript. Jika kalian ingin menggunakan library jquery kalian bisa bisa langsung mengunjungi situs jquery.com. Lanjut lagi untuk pembahasan mengenai cara membuat menu dropdown, untuk langkah-langkah nya kalian bisa mengikuti kode-kode berikut ini.

Langkah pertama adalah membuat struktur menu dropdown itu sendiri dengan cara menuliskan kode HTML5 berikut ini.

<body>
    <nav>
      <ul class="drop-down closed">
        <li><a href="#" class="nav-button">About</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</body>

Pada list item diatas kalian bisa menentukan sendiri berapa banyak menu yang akan ditampilkan, setelah membuat struktur seperti diatas, selanjutnya kita akan desain tampilan menu dengan kode CSS3 berikut agar terlihat lebih menarik untuk dilihat.

html, body { background: #2c3e50; }
nav {margin-top: 40px; }

nav .drop-down {
  list-style: none;
  overflow: hidden;   
  height: 220px;
  background-color: #d35400;
  font-family: Arial;
  width: 200px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease;
}

nav .drop-down.closed {
  height: 43px;
}

nav .drop-down li {
  border-bottom: 5px solid #2c3e50;
}

nav .drop-down li a {
  display: block;
  color: #ecf0f1;
  text-decoration: none;
  padding: 10px;
}
.drop-down li a:hover {
    background-color: #e67e22;
}

nav .drop-down li:first-child a:after {
  content: "\25BC";
  float: right;
  margin-left: -30px;
  margin-right: 5px;
}

Selanjutnya adalah menambahkan kode jquery untuk membuat fungsi dropdown pada menu yang telah kita buat diatas, berikut kode jquery untuk menu dropdown.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function() {
      $(".nav-button").click(function() {
        $(this).parent().parent().toggleClass("closed");
      });
    });
</script>

Setelah semua kode diatas telah diketikan, langkah selanjutnya simpan file nya kemudian buka pada browser masing-masing dan lihat hasilnya, maka akan terlihat tampilan seperti gambar berikut.

Cara Membuat Menu Dropdown sederhana dengan Jquery

Baik, cukup sekian tutorial mengenai cara membuat menu dropdown sederhana dengan jquery, semoga bermanfaat dan selamat mencoba.

1 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat