Cara Membuat Menu Dropdown di HTML dan CSS

Setiap website memiliki Menu Navigasi untuk membantu pengunjung mencari konten yang mereka cari. Agar pengunjung semakin cepat dalam mencari konten, ada beberapa website yang menggunakan fitur Menu Dropdown.

Bagi kamu yang tidak tahu, Menu Dropdown merupakan sebuah fitur dimana di dalamnya terdapat Submenu dari sebuah Menu. Menu Dropdown akan ditampilkan menurun ke bawah. Biasanya, Menu Dropdown banyak digunakan pada website atau blog yang membahas berbagai macam topik/niche.

Di kesempatan kali ini, saya akan memberikan sebuah tutorial mengenai Cara Membuat Menu Dropdown di HTML dan CSS. Bagi kamu yang ingin mengetahui cara membuatnya. Silahkan simak langkah-langkah di bawah ini yaa!

Cara Membuat Menu Dropdown HTML CSS

1. HTML

Perlu kamu ketahui, Menu Dropdown yang akan kita buat ini akan muncul jika kursor diarahkan ke bagian Menu Dropdown itu.

Pertama, mari kita buat daftar dari Menu kita, menggunakan tag <ul> dan <li>.

html
<div class="navbar-menu">
  <ul>
    <li><a href="#" class="link">Menu</a></li>
    <li><a href="#" class="link">Menu</a></li>
    <li><a href="#" class="link">Menu</a></li>
    ...
  </ul>
</div>

Kemudian kita buat lagi tag <li> untuk Menu Dropdown-nya dan letakkan kode tersebut tepat di bawah tag <li> yang terakhir atau dimana saja asalkan sejajar dengan salah satu tag <li> di atas.

html
<li>
  <a href="javascript:;" class="link">Menu</a>

  <!-- Dropdown -->
  <ul class="dropdown">
    <li><a href="#" class="link">Submenu</a></li>
    <li><a href="#" class="link">Submenu</a></li>
    <li><a href="#" class="link">Submenu</a></li>
    <li><a href="#" class="link">Submenu</a></li>
  </ul>
</li>

Sehingga kode HTML-nya akan menjadi seperti ini.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codebanba</title>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header-wrap">
    <nav class="container">
      <div class="navbar-title">
        <h1>Codebanba</h1>
      </div>

      <div class="navbar-menu">
        <ul>
        
          <li><a href="#" class="link">Menu</a></li>
          <li><a href="#" class="link">Menu</a></li>
          <li><a href="#" class="link">Menu</a></li>

          <li>
            <a href="javascript:;" class="link">Menu</a>

            <!-- Dropdown -->
            <ul class="dropdown">
              <li><a href="#" class="link">Submenu</a></li>
              <li><a href="#" class="link">Submenu</a></li>
              <li><a href="#" class="link">Submenu</a></li>
              <li><a href="#" class="link">Submenu</a></li>
            </ul>
          </li>
          
        </ul>
      </div>
    </nav>
  </header>
</body>
</html>

Sampai tahap ini, tampilan website kita akan terlihat seperti ini.

2. CSS

Setelah kita membuat kerangka HTML, sekarang kita berikan style menggunakan CSS. Silahkan salin kode di bawah ini ke dalam tag <style> atau file .css kamu.

css
* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  color: #222;
  background-color: #fefefe;
}

h1, h2 {
  margin: 0;
}

.container {
  width: 1080px;
  padding: 0 20px;
  margin: 0 auto;
}

.header-wrap {
  position: relative;
  width: 100%;
  background-color: #041C32;
}

.header-wrap .container {
  display: flex;
  align-items: center;
}

.navbar-title {
  margin-right: 80px;
}

.navbar-title h1 {
  font-size: 20px;
  font-weight: 400;
  color: #fefefe;
}

.navbar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 90%;
}

.navbar-menu > ul {
  display: flex;
  align-items: center;
}

.navbar-menu > ul > li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 60px;
}

.navbar-menu > ul > li:not(:last-child) {
  margin-right: 40px;
}

.navbar-menu .link {
  display: flex;
  align-items: center;
  color: #fefefe;
  text-decoration: none;
}

Tampilan website kita akan menjadi seperti ini.

Seperti yang kamu lihat, tampilan website kita sedikit berantakan pada bagian Submenu. Itu terjadi karena kita belum memberikan style pada selector .dropdown.

Tapi, sebelum kita memberikan style pada selector .dropdown. Kita harus memberikan property position dengan nilai relative pada selector .navbar-menu ul li. Silahkan salin kode di bawah ini dan tambahkan ke dalam css kamu.

css
.navbar-menu ul li {
  position: relative;
}

Fungsi dari property position: relative; pada kode di atas yaitu agar posisi elemen <li> bersifat tetap atau tidak berpindah tempat.

Kenapa kita menggunakan property position: relative;?

Karena kita akan memberikan selector .dropdown dengan property position: absolute;. Dimana, jika kita memberikan sebuah elemen dengan property position: absolute;, maka elemen tersebut akan memiliki sifat tidak tetap. Sehingga Menu Dropdown tersebut akan keluar dari element parent-nya. Karena itu, kita menambahkan property position: relative; pada tag <li> agar element child-nya akan tetap berada di wilayah element parents-nya.

Untuk penjelasan lebih lanjut mengenai property position, silahkan baca-baca di link berikut ini - MDN CSS Property.

Kemudian, kita akan memberikan style pada selector .dropdown. Silahkan salin kode di bawah ini dan masukkan ke dalam CSS kamu.

css
.navbar-menu .dropdown {
  position: absolute;
  top: 60px;
  left: -16px;
  min-width: 180px;
  background-color: #0c2741;
  font-size: 87%;
}

.navbar-menu .dropdown .link {
  display: block;
  padding: 14px 16px;
}

Pada tahap ini, tampilan website kita akan terlihat seperti pada gambar.

Sekarang, kita akan menghilangkan Menu Dropdown-nya. Caranya bisa menggunakan property opacity: 0; atau visibility: hidden;. Tapi biasanya, saya menggunakan keduanya agar Menu Dropdown-nya benar-benar hilang.

Silahkan tambahkan property tadi ke dalam selector .navbar-menu .dropdown. Sehingga akan menjadi seperti ini.

css
.navbar-menu .dropdown {
  position: absolute;
  top: 60px;
  left: -16px;
  min-width: 180px;
  background-color: #0c2741;
  font-size: 87%;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
}

Sekarang Menu Dropdown-nya sudah hilang kan?

Setelah itu, kita akan membuat agar Menu Dropdown tersebut bisa muncul saat kita mengarahkan kursor ke Menu yang memiliki Submenu. Disini kita akan menggunakan selector :hover.

Nah, disini kita harus menempatkan selector :hover pada tag <li>. Contohnya seperti .navbar-menu > ul > li:hover.

Karena kita akan memunculkan .dropdown yang sudah kita hilangkan tadi. Maka kita akan menggunakan selector .navbar-menu > ul > li:hover .dropdown ini. Kemudian kita akan mengubah nilai dari property opacity menjadi 1 dan visibility menjadi visible. Silahkan salin kode di bawah ini.

css
.navbar-menu > ul > li:hover .dropdown {
  opacity: 1;
  visibility: visible;
}

Sekarang, Menu Dropdown kita sudah jadi. Untuk mencobanya, kamu bisa mengarhkan kursor ke Menu yang memiliki Submenu.

Cara Membuat Menu Dropdown di HTML dan CSS gif

Berikut ini untuk keseluruhan dari kode CSS tadi.

css
* {
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  color: #222;
  background-color: #fefefe;
}

h1, h2 {
  margin: 0;
}

.container {
  width: 1080px;
  padding: 0 20px;
  margin: 0 auto;
}

.header-wrap {
  position: relative;
  width: 100%;
  background-color: #041C32;
}

.header-wrap .container {
  display: flex;
  align-items: center;
}

.navbar-title {
  margin-right: 80px;
}

.navbar-title h1 {
  font-size: 20px;
  font-weight: 400;
  color: #fefefe;
}

.navbar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 90%;
}

.navbar-menu > ul {
  display: flex;
  align-items: center;
}

.navbar-menu > ul > li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 60px;
}

.navbar-menu > ul > li:not(:last-child) {
  margin-right: 40px;
}

.navbar-menu .link {
  display: flex;
  align-items: center;
  color: #fefefe;
  text-decoration: none;
}

.navbar-menu ul li {
  position: relative;
}

.navbar-menu .dropdown {
  position: absolute;
  top: 60px;
  left: -16px;
  min-width: 180px;
  background-color: #0c2741;
  font-size: 87%;
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
}

.navbar-menu .dropdown .link {
  display: block;
  padding: 14px 16px;
}

.navbar-menu > ul > li:hover .dropdown {
  opacity: 1;
  visibility: visible;
}

Demo

Kesimpulan

Kesimpulannya, untuk membuat Menu Dropdown di HTML dan CSS. Kita hanya membutuhkan selector :hover dan property untuk menghilangkan Menu Dropdown-nya. Dimana ada banyak cara untuk menghilangkan Menu Dropdown dari tampilan website kita, seperti menggunakan opacity: 0;, visibility: hidden;, display: none dan lain-lain. Kemudian kita ganti nilai property tersebut menjadi sebaliknya saat kursor diarahkan ke tag <li>.

Jujur saja, saya juga sempat bingung saat dulu mencoba membuat Menu Dropdown pada situs saya. Namun, saya terus pahami property dan selector tersebut. Akhirnya saya bisa membuat Menu Dropdown sendiri.

Baiklah, mungkin itu saja untuk tutorial Cara Membuat Menu Dropdown di HTML dan CSS. Jika kamu masing bingung dengan penjelasan di atas. Silahkan tanyakan di kolom komentar. Terimakasih sudah berkunjung dan semoga bermanfaat.

Cara Membuat Menu Dropdown di HTML dan CSS

Cara Membuat Menu Dropdown HTML CSS

1. HTML

2. CSS

Kesimpulan

Related articles

Comments