Membuat Menu Navigasi Dropdown
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing tentang bagaimana cara Membuat Menu Navigasi Dropdown
A. Pengertian
Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain.
B. Latar belakang
Latar belakang belajar tentang materi kali ini adalah agar kita bisa membuat menu dengan fitur dropdown
C. Alat dan bahan
- Komputer / Laptop
- Text Editor
D. Tujuan
- Menghemat Tempat link pada menu
- Memperbagus Tampilan web
E. Langkah - langkah
- Buat file dengan Nama " Dropdown.html "
- Masukkan script dibawah ini
<!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">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
E. Referensi
Sekian share kali ini, selamat mencoba dan semoga bermanfaat, terimakasih.
Wassalamualaikum wr.wb