Cara Membuat Menu Dropdown sederhana dengan Jquery

01/10/2017    Risman Hakim    1837     Website

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.

jQuery, Web Design, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More