Cara Membuat Efek Dropdown Menu dengan jQuery

Cara Membuat Efek Dropdown Menu dengan jQuery - Menu dropdown merupakan elemen yang sangat penting sekali pada halaman website, kenapa ? karena dengan dropdown akan sangat membantu user dalam menemukan informasi dengan link yang terdapat pada dropdown. Tentu dropdown dalam setiap tampilan website sangat beragam jenis nya. Begitu juga dengan cara pembuatan nya, ada banyak sekali cara dalam membuat menu dropdown, ada yang membuat nya hanya dengan HTML dan CSS ada pula yang dikombinasikan dengan jQuery agar terlihat lebih interaktif. Nah, kali ini saya akan bagikan tutorial tentang menu dropdown yaitu bagaimana Cara Membuat Efek Dropdown Menu dengan jQuery. penasaran bagaimana cara membuatnya ? Simak selengkapnya berikut ini.

Kode HTML

Untuk membuat menu dropdown tentu hal yang pertama adalah membuat file html dan membuat kerangka dari menu dropdown nya. Silahkan kalian bisa ketikan kode HTML berikut untuk kerangka menu dropdown nya.

<body>
    <nav id="nav" class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="">About</a>
          <ul>
            <li><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
          </ul>
        </li>
        <li><a href="">Products</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Contact</a>
          <ul>
            <li><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
          </ul>
        </li>
      </ul>
    </nav>
</body>

Kode CSS

Langkah selanjutnya, setelah membuat kerangka menu dropdown dengan HTML adalah mendesain tampilan menu aga terlihat rapi dan menraik untuk dilihat. Silahkan kalian bisa ketikan kode CSS untuk desain menu dropdown nya.

@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
*{
    margin: 0;
    padding: 0;
}
body {
  background: #2a333b;
  font-family: 'Quicksand', sans-serif;
}
#nav {
    width: 643px;
    margin: auto;
    height: 40px;
    background: #006266;
    margin-top: 2.5em;
}
#nav ul li {
    display: inline-block;
    padding: 0px 10px;
    width: 105px;
    font-size: 1.15em;
    text-align: center;
    line-height: 40px;
}

#nav ul li ul {
    display: none;
    position: absolute;
    background: #fff;
    margin: 1px 0 0 -9px;
    padding: 5px 0px;
}
#nav ul li ul:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 5%;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #ffffff transparent;
}
#nav ul li ul li {
    display: block;
}
#nav ul li ul li a {
    font-weight: normal;
    font-size: .65em;
    color: #5f7385;
    padding: 0px;
    display: block;
}
#nav ul li ul li a:hover {
    border-top: none;
    color: white;
    background: rgb(0, 98, 102, 0.6);
}
#nav ul li ul li a:active {
    position: relative;
    top: 1px;
}
#nav ul li a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding-top: 9px;
}

Kode jQuery

Setelah selesai mendesain menu dropdown nya, selanjutnya kita akan beri sentuhan efek pada dropdown agar pergerakan dropdown terlihat lebih smooth dengan kode jQuery berikut ini.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#nav li").hover(function() { 
            $(this).find("ul").slideToggle("fast"); 
         });
    });
</script>

Setelah semua kode HTML, CSS dan jQuery telah diketikan, silahkan simpan file nya kembali kemudian kalian bisa melihat hasil akhir pada browser masing - masing. Maka tampilan menu dropdown nya akan tampak seperti berikut.

Cara Membuat Efek Dropdown Menu dengan jQuery

Baiklah, cukup sekian tutorial sederhana tentang bagaimana Cara Membuat Efek Dropdown Menu dengan jQuery, semoga tutorial ini bermanfaat. Selamat mencoba dan sampai jump[a lagi di tutorial selanjutnya :)

11 Juli 2019

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat