Tutorial jQuery #6 - Membuat Dropdown Sederhana menggunakan jQuery

Tutorial jQuery #6 - Membuat Dropdown Sederhana menggunakan jQuery

HobbyTekno - Pada postingan kali ini Admin akan menjelaskan cara membuat Dropdown sederhana menggunakan jQuery. Pada saat Link Menu di klik, nantinya akan menampilkan menu Dropdown dengan slide, langsung saja simak cara membuat Dropdown Sederhana menggunakan jQuery.

Tutorial jQuery #6 - Membuat Dropdown Sederhana menggunakan jQuery


1. Pastikan File jQuery ada dalam Folder Project anda atau gunakan CDN jQuery secara online.

2. Buat file .html, ketik kode seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link ke jQuery -->
    <script src="jquery.js"></script>
    <!-- Link ke Script.js -->
    <script src="script.js"></script>
    <!-- Link ke CSS -->
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial jQuery #6 - Membuat Dropdown Sederhana</title>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Dropdown</a>
                    <ul>
                        <li><a href="#">Isi Dropdown 1</a></li>
                        <li><a href="#">Isi Dropdown 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
3. Buat file dengan nama style.css, ketik kode seperti berikut ini.
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
}
.container {
    width: 70%;
    margin: auto;
}
.navbar ul {
    margin-top: 30px;
    background-color: darkblue;
}
.navbar ul li {
    s list-style: none;
    display: inline-block;
}
.navbar ul li a {
    font-weight: bold;
    color: white;
    display: block;
    overflow: hidden;
    padding: 20px;
    text-decoration: none;
}
.navbar ul li a:hover {
    color: yellow;
}
.navbar ul li ul {
    display: none;
    margin-top: 4px;
    background: blue;
    position: absolute;
}
.navbar ul li ul li {
    display: block;
}
4. Buat file dengan nama script.js, ketik kode seperti berikut
$(document).ready(function () {
    $('.navbar li').click(function () {
        $(this).find('ul').slideToggle();
    })
})
Penjelasan : Pada saat ".navbar li" di klik, pada elemen .navbar li cari ul lalu gunakan Event slideToggle.

5. Lalu coba klik Link Dropdown untuk memunculkan isi Menu Dropdown

Sekian Tutorial jQuery #6 - Membuat Dropdown Sederhana menggunakan jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Tutorial jQuery #6 - Membuat Dropdown Sederhana menggunakan jQuery"