Assalammualaikum Wr. Wb.
Guys kali ini saya akan berbagi ilmu sedikit tentang Dropdown, yuk disimak.
A. Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.
B. 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.
C. Maksud dan Tujuan
Membuat varisasi dalam memilih.
D. Alat dan Bahan
15 Menit
F. 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" atau sesuaikan dengan nama yang anda pilih.
3. Simpan, dan buka di browser anda dengan cara CTRL+O pada keyboard anda.
G. Kesimpulan
Jadi teman-teman mau membuat dropdown sangat berguna sekali.
H. Refrensi
www.w3schools.com
I. Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan.
Selamat mencoba dan selamat belajar. !
Wassalamualaikum Wr. Wb.
Guys kali ini saya akan berbagi ilmu sedikit tentang Dropdown, yuk disimak.
A. Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.
B. 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.
C. Maksud dan Tujuan
Membuat varisasi dalam memilih.
D. Alat dan Bahan
- Komputer atau Laptop.
- Sublime text atau text editor lainnya.
15 Menit
F. 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" atau sesuaikan dengan nama yang anda pilih.
<!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;
width: 200px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: blue;
min-width: 140px;
color: #fff;
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>
<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;
width: 200px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: blue;
min-width: 140px;
color: #fff;
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.
G. Kesimpulan
Jadi teman-teman mau membuat dropdown sangat berguna sekali.
H. Refrensi
www.w3schools.com
I. Penutup
Trimakasih telah menyimak postingan saya, share dan like artikel ini. Join blog saya kawan.
Selamat mencoba dan selamat belajar. !
Wassalamualaikum Wr. Wb.
Membuat Hover Dropdown Sederhana
Reviewed by Ainul_Arifin29
on
July 18, 2017
Rating:
Reviewed by Ainul_Arifin29
on
July 18, 2017
Rating:
No comments: