Hallo...
Semangat Pagi !
Masih semangat untuk belajar kawan. Setelah sebelumnya saya posting tentang Mengenal dan Membuat Hover Effect Menu kali ini saya akan meneruskannya menjadi Membuat Hover Dropdown Sederhana.
Mari menyimak !
Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.
Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.
Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.
Tahap Pelaksanaan
1. Tahap awal, tentu membuka text editornya terlebih dahulu, saya terbiasa menggunakan sublime text, karena memudahkan pengerjaan.
2. Tulis kode di bawah ini, lalu simpan dengan nama "beranda.html".
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Menu 1</a></li>
<li><a href="#news">Menu 2</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</li>
</ul>
</body>
</html>
3. Simpan, dan buka di browser anda dengan cara CTRL+O pada keyboard anda.
Referensi
www.w3schools.com
Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan klik disini.
Selamat mencoba dan selamat belajar. !
Apabila ada yang di tanyakan silahkan hubungi saya via sosmed :)
