Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 21 : Membuat Menu Dropdown dengan CSS

By Web Design Purbalingga
Membuat Menu Dropdown dengan CSS – Pada materi seri belajar css sebelumnya, kita sudah belajar tentang bagaimana cara membuat menu navigasi bar. Nah, pada materi ini kita akan melanjutkan seri sebelumnya yaitu dengan menambahkan menu dropdown pada menu navigasi yang sudah kita buat.

Membuat Menu Dropdown dengan CSS

Sebelum lanjut pada pembahasan, kita tidak akan membuat file baru, cukup buka kembali file tentang membuat navigasi bar pada materi sebelumnya saja.
Oke, sekarang tambahkan baris kode berikut ini setelah baris kode menu unduh
<div class="dropdown">
    <button class="dropbtn">Materi 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">JAVASCRIPT</a>
    </div>
  </div>
Jika di gabungkan akan seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Dropdown dengan CSS</title>
</head>
<body>
  <h2>Selamat Datang di Forum Web Design Purbalingga</h2>
  <div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">Tutorial</a>
  <a href="#news">Unduh</a>
  <div class="dropdown">
    <button class="dropbtn">Materi 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">JAVASCRIPT</a>
    </div>
  </div> 
</div>
</body>
</html>
Lalu untuk kode css ada sedikit tambahan, karena ada menu baru yaitu berupa menu dropdown. Untuk lebih jelasnya bisa perhatikan baris kodenya di bawah ini. Letakan baris kode css ini tepat di bawah tag <title>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style type="text/css">
  h2 {
   text-align: center; 
  }
    .navbar {
    overflow: hidden;
    background-color: teal;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #9999fa;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}
  </style>
Nah, ini adalah tampilan atau hasil dari seluruh baris kode di atas.
Kalian bisa menyesuaikan warna atau ingin menambahkan menu lainnya.
Demikian materi kali ini tentang cara membuat menu dropdown sederhana dengan css. Jika ada point yang belum jelas silahkan tinggalkan pertanyaan di kolom komentar di bawah ini. Semoga bermanfaat dan sampai jumpa di materi berikutnya.