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>
Untuk mempercantik tampilannya, tambahkan CSS ini:
#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

Download Source Hasil Akhir

Sampai disini selesai membuat Menu Dropdown, tapi menu ini belum responsive. Bersambung.. ke part-2 Membuat Menu Responsive, dengan icon Burger