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
Sampai disini selesai membuat Menu Dropdown, tapi menu ini belum responsive. Bersambung.. ke part-2 Membuat Menu Responsive, dengan icon Burger