Step by Step memahami Pembuatan Menu Dropdown
Belajar membuat menu dropdown - Pada tutorial kali ini saya akan membagikan cara membuat menu Dropdown sederhana. Untuk uji coba saya rekomendasikan untuk mendownload Notepad++ untuk editing.
Langkah Pertama
Copy kode HTML sederhana ini untuk pembuatan Menu standar, tanpa Dropdown.
<nav id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#"> Tanpa Dropdown</a></li>
</ul>
</nav>#menu{
background:#888;
height:45px;
margin:0 auto;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none
}
#menu ul{
height:45px;
width:auto;
}
#menu li{
float:left;
display:inline;
position:relative;
font-size:14px;
color:#fff;
font-weight:500;
}
#menu a{
display:block;
line-height:45px;
padding:0 14px;
text-decoration:none;
color:#fff;
}
#menu li a:hover {
color:#fff;
background-color:#555;
transition: all 0.3s ease-in;
}Atau apabila ingin versi file HTML lengkap, silahkan copy code ini :
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
body {border: 0;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 400;
margin: 0;
outline: 0;
padding: 0;
background:#eee;
}
header {
background:#1b206d;
height:70px;
color:white;
text-align:center;
top:0;
}
header h1 {
font-size:200%;
font-weight:700;
text:transform:uppercase;
line-height:70px;
margin:0 auto;
}
#menu{
background:#888;
height:45px;
margin:0 auto;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none
}
#menu ul{
height:45px;
width:auto;
}
#menu li{
float:left;
display:inline;
position:relative;
font-size:14px;
color:#fff;
font-weight:500;
}
#menu a{
display:block;
line-height:45px;
padding:0 14px;
text-decoration:none;
color:#fff;
}
#menu li a:hover {
color:#fff;
background-color:#555;
transition: all 0.3s ease-in;
}
</style>
</head>
<body>
<header>
<h1>HEADER</h1>
</header>
<nav id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">About</a></li>
<li><a href="#"> Tanpa Dropdown</a></li>
</ul>
</nav>
</body>
</html>
Maka hasilnya akan seperti gambar di bawah ini :
Langkah ke-2 Menambah Dropdown
Perhatikan kode ini:
<li><a href="#"> Tanpa Dropdown</a></li>
Tambahkan setelahnya, kode ini :
<li><a class="sub" href="#">Dropdown</a>
<ul class="menus">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href='#'>Menu3</a></li>
</ul>
</li>
Tambahkan juga CSS (saya buat sengaja dropdown terlihat)
/* Dropdown Menu */
#menu a.sub:after{
content:''; /* Kode Panah */
display:inline-block;
background-color:#fff;
color:#fff;
width:12px;
height:12px;
margin-left:10px;
vertical-align:-1px;
transition:all .3s ease;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,10L12,15L17,10H7Z`' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#menu a.sub:hover:after{
transform:rotate(180deg); /* Panah diputar saat disentuh mouse */
}
#menu ul.menus{
height:auto;
overflow:hidden;
width:180px;
background:#666;
position:absolute;
z-index:99;
display:block; /* Dropdown terlihat */
left:0;
}
#menu ul.menus li{
display:block;
width:100%;
}
#menu ul.menus a{
color:#fff;
line-height:45px;
}
#menu ul.menus a:hover{
background:#5d99a2;
color:#fff;
}
Sehingga hasilnya seperti pada gambar di bawah :
Langkah Terakhir
Ganti
display:block dengan display:none ini untuk menyembunyikan isi Dropdown, pada kode ini:#menu ul.menus{
height:auto;
overflow:hidden;
width:180px;
background:#666;
position:absolute;
z-index:99;
display:block; /* ganti dengan display:none */
left:0;
}Tambahkan kode CSS ini, untuk memunculkan kembali ketika di sentuh (hover)
#menu li:hover ul.menus{
display:block
}Silahkan coba lihat hasil akhir, kalau mau dipelajari silahkan download Source
2 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code