Cara Membuat Menu Dropdown Keren dengan HTML dan CSS

By Posted on

Cara Membuat Dropdown Keren dengan HTML dan CSS – Dalam dunia yang terus berkembang secara digital, kemampuan untuk menciptakan desain web yang menarik dan fungsional menjadi semakin penting. Salah satu elemen kunci dalam desain web adalah menu navigasi, yang memungkinkan pengguna untuk menjelajahi konten dengan mudah dan intuitif. Menu dropdown, dengan kemampuannya untuk menyajikan pilihan yang banyak dalam ruang yang terbatas, merupakan salah satu opsi populer dalam menyusun menu navigasi sebuah situs web.

Namun, bagi pemula, menciptakan menu dropdown yang menarik dan responsif mungkin terlihat menakutkan. Dalam artikel ini, kelashtml akan membahas dengan detail langkah-langkah untuk membuat menu dropdown yang keren menggunakan HTML dan CSS. Tak perlu khawatir, karena kami akan menjelaskan setiap langkah dengan mudah dipahami, sehingga Anda bisa memulai perjalanan desain web Anda dengan percaya diri.

Cara Membuat Dropdown Keren dengan HTML dan CSS

1. Buat Folder Project Menu Dropdown

Pertama, mari kita mulai dengan membuat folder project baru di komputer Anda. Dengan memberi nama folder yang sesuai, seperti “Menu Dropdown Project“, Anda dapat dengan mudah menyimpan semua file terkait dengan proyek ini.

2. Buat Folder Img

Di dalam folder project yang baru saja dibuat, buatlah folder baru dengan nama “img“. Folder ini akan menjadi tempat penyimpanan untuk semua gambar yang akan Anda gunakan dalam menu dropdown. Download disini untuk diterapkan dalam project dropdown.

Baca Juga:  Cara Membuat Background Gif di HTML

3. Buat Sebuah File menu_dropdown.html

Langkah berikutnya adalah membuat file HTML baru dengan nama “menu_dropdown.html” di dalam folder project. File ini akan menjadi tempat kita untuk menulis kode HTML yang akan membentuk struktur dasar dari menu dropdown.

Berikut ini file html yang dapat Anda tambahkan untuk membuat menu dropdown keren dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Dropdown</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="navbar">
  <a href="#">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="https://riztekno.com/">
        <img src="img/gmail.png" alt="Product 1">
        <span>Product 1</span>
      </a>
      <a href="https://riztekno.com/">
        <img src="img/instagram.png" alt="Product 2">
        <span>Product 2</span>
      </a>
      <a href="https://riztekno.com/">
        <img src="img/placeholder.png" alt="Product 3">
        <span>Product 3</span>
      </a>
    </div>
  </div>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

</body>
</html>
 

4. Buat File style.css

Baca Juga:  Cara Membuat Button Radio di HTML

Selanjutnya, mari kita buat file CSS baru dengan nama “style.css” di dalam folder project. File ini akan digunakan untuk mengatur tampilan dan gaya dari menu dropdown yang akan kita buat.

Berikut ini file css yang dapat Anda tambahkan untuk membuat menu dropdown keren dengan html dan css:

/* Style the navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
  }
  
  /* Navigation links */
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  /* Dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 20px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  /* Dropdown content (hidden by default) */
  .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;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 8px 16px; /* Updated padding */
    text-decoration: none;
    display: flex; /* Added */
    align-items: center; /* Added */
  }
  
  /* Add a hover effect for dropdown links */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Style the active/current link */
  .navbar a.active {
    background-color: #666;
    color: white;
  }
  
  /* Resize images */
  .dropdown-content img {
    max-width: 20px; /* Adjusted */
    height: auto;
    margin-right: 10px; /* Added margin */
  }
  
  /* Style the text next to images */
  .dropdown-content span {
    font-size: 14px; /* Adjusted */
    margin-left: 5px; /* Added margin */
  }
 

5. Mengubah Tampilan Menu Dropdown

Baca Juga:  Cara Membuat Pencarian di HTML

Dengan menggunakan kode HTML yang telah kita buat sebelumnya, kita akan menambahkan kode CSS untuk mengatur tampilan dan interaksi dari menu dropdown. Gunakan tag <ul> dan <li> untuk membuat daftar menu, dan tambahkan gaya CSS untuk menciptakan efek dropdown yang menarik.

6. Simpan & Lihat Tampilan

Terakhir, setelah menyelesaikan semua langkah di atas, jangan lupa untuk menyimpan semua perubahan yang telah Anda lakukan. Kemudian, buka file “menu_dropdown.html” menggunakan browser Anda untuk melihat tampilan dari menu dropdown yang telah berhasil Anda buat.

Preview hasil

Berikut ini preview hasil dropdown dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah di atas, Anda akan dapat membuat menu dropdown yang keren dan responsif menggunakan HTML dan CSS. Jangan ragu untuk bereksperimen dengan berbagai gaya dan efek untuk menyesuaikan menu dropdown sesuai dengan kebutuhan dan preferensi desain Anda. Mari kita mulai membangun halaman web yang menarik dan fungsional bersama-sama!

Related posts: