1. Pendahuluan
Menu web/blog sangat bervariasi salah satunya dibuat dengan css, ada bentuk menu berupa text maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada artikel kali ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css.
2. Tujuan
- Memebuat dan memahami basic dropdown
- Laptop
- Text editor
- Web Browser
- Buka Text editor
- Buat file index.html ketikkan coding dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Simple Drobdown</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Pindahkan cursor ke Button</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>
</body>
</html> - Save, dan buat file style.css, ketikkan coding dibawah ini, dan save
.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);
}
.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: skyblue;
}
- Untuk melihat hasilnya, cek di Web browser
5. Referensi
- https://www.w3schools.com/css/css_dropdowns.asp
.jpg)
.jpg)
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment