Dropdown menu pengertian sederhana nya kalau kita arah kan cursor ke menu ada link kebawah .
ok sobat langsung saja
dibawah ini code nya Html dan Css
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>Code Dropdown Menu</h1>
<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>
<p><strong>Catatan:</strong> ganti href="#" dengan link sobat.tanda # dihapus terus diganti dengan link sobat</p>
</body>
</html>
saya akan ubah sedikit saja
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #008CBA;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>Code Dropdown Menu</h1>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="https://hudori123.blogspot.co.id/2018/01/membuat-link-donload-google-drive.html">tips dan Triks</a>
<a href="https://hudori123.blogspot.co.id/2018/03/ebook-latihan-ms-office.html">Ebook Gratis</a>
<a href="https://hudori123.blogspot.co.id/2018/01/d0a-sholat-dan-artinya.html">Islami</a>
</div>
</div>
<p><strong>ADMIN:</strong> TERIMAKASIH Telah Mampir DI Gubuk SAYA </p>
</body>
</html>
hasilnya
Code Dropdown Menu
ADMIN: TERIMA KASIH Telah Mampir DI Gubuk SAYA
coba sobat latihan menggunakan aplikasi di notepad ubah warna dan link nya ok selamat belajar
Alhamdulillah Catatan Sederhana mengenai Membuat Dropdown Menu telah selesai Mohon maaf jika da kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment