CARA - diklik Dropdown

Pelajari cara membuat menu dropdown yang dapat diklik dengan CSS dan JavaScript.

dropdown

Sebuah menu dropdown adalah menu toggleable yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar yang tersedia:

Buat Dropdown diklik

Membuat menu dropdown yang muncul saat pengguna mengklik tombol.

Langkah 1) Tambah HTML:

Contoh

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>
</div>

misalnya Dijelaskan

Gunakan setiap elemen untuk membuka menu dropdown, misalnya <button>, <a> atau <p> elemen.

Gunakan elemen wadah (like <div>) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.

Bungkus <div> elemen di sekitar tombol dan <div> untuk posisi menu dropdown benar dengan CSS.

Langkah 2) Tambah CSS:

Contoh

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

misalnya Dijelaskan

Kami telah ditata tombol dropdown dengan latar belakang warna, padding, melayang-layang efek, dll

The .dropdown penggunaan kelas position:relative , yang diperlukan ketika kita ingin isi dropdown untuk ditempatkan tepat di bawah tombol dropdown (using position:absolute ) .

The .dropdown-content kelas memegang menu dropdown yang sebenarnya. Hal ini tersembunyi secara default, dan akan ditampilkan di hover (see below) . Perhatikan min-width diatur ke 160px. Jangan ragu untuk mengubah ini. Tip: Jika Anda ingin lebar isi dropdown untuk menjadi selebar tombol dropdown, mengatur width sampai 100% (dan overflow:auto untuk mengaktifkan gulir pada layar kecil).

Alih-alih menggunakan perbatasan, kami telah menggunakan box-shadow properti untuk membuat menu dropdown terlihat seperti "card" .

Langkah 3) Tambah JavaScript:

Contoh

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

Cobalah sendiri "