 |
| Ilustrasi menu dropdown blogger |
- Kompatibel dengan HTML5.
- Kompatibel dengan CSS3
- Lebih banyak CSS
- Hanya menggunakan sedikit JavaScript
Tentu saja penggunaan JavaScript tidak bisa dihindarkan, ia masih berkembang dan tidak menutup kemungkinan akan menjadi sebuah bahasa yang dinamis dan ringan di masa depan, tentu saja jika ia masih hidup sampai nanti. Namun jika kita hanya ingin menggunakan CSS? Inilah yang dapat kita lakukan.
2. Membuat menu dropdown murni CSS.
Perhatikan tombol berikut dan coba sentuh:
Kemudian perhatikan kode CSS pembuatannya berikut, dibawah ini:
<style>
.dropbtn {
background-color: #ff0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<p>SENTUH TOMBOL DROPDOWN DIBAWAH INI.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
2. BAGAIMANA JIKA DENGAN JAVASCRIPT?
Namun jika kalian ingin menampilkan menu dropdown dengan cara di "klik" terlebih dahulu, maka mau tidak mau kalian harus menanamkan kode JavaScript ke dalamnya. Contoh tombol berikut harus di klik terlebih dahulu:
Namun jika kalian ingin menampilkan menu dropdown dengan cara di "klik" terlebih dahulu, maka mau tidak mau kalian harus menanamkan kode JavaScript ke dalamnya. Contoh tombol berikut harus di klik terlebih dahulu:
Perhatikan perbedaan kode terakhirnya yang saya sorot kuning:
<style>Jadi sekarang kalian mengerti perbedaannya: Pada bagian elemen yang murni dibuat dengan CSS untuk menampilkan menu cukup dengan disentuh saja. Sedangkan pada bagian yang di tambahkan dengan JavaScript, kita menambahkan "action" yakni harus di klik terlebih dahulu untuk menampilkan menu dropdown.
.dropbtn {
background-color: #FF0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<p>SENTUH TOMBOL DROPDOWN WARNA MERAH DI BAWAH INI.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
<script>function myFunction() {document.getElementById("myDropdown").classList.toggle("show");}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');}}}}</script>