Bu Herva: Cara Membuat Drop Down Menu CSS Sederhana

Buat file menu.html lalu tambahkan sintaksis berikut:

<div class="dropdown">
  <button class="mainmenubtn">Main Menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdomain.com/page1.html">Sub Menu 1</a>
    <a href="http://wwww.yourdomain.com/page2.html">Sub Menu 2</a>
    <a href="http://wwww.yourdomain.com/page3.html">Sub Menu 3</a>
    <a href="http://wwww.yourdomain.com/page4.html">Sub Menu 4</a>
    <a href="http://wwww.yourdomain.com/page5.html">Sub Menu 5</a>
  </div>
</div>

Terapkan CSS dan Tambahkan Efek Dropdown

Seperti yang Anda lihat, menu HTML dengan tampilan yang sangat biasa tentunya tidak terlihat menarik. Jadi, sekarang kami akan memberi warna tombol menu dan menambahkan efek dropdown. Ubah kode HTML dengan menambahkan rule CSS berikut di atas kode sebelumnya:

.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Tampilan akhir file menu.html akan terlihat seperti berikut:

<html>
<head>
<style>
.mainmenubtn {
    background-color: skyblue;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.mainmenubtn:hover {
    background-color: blue;
    }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: skyblue;
    min-width: 200px;
}
.dropdown-child a {
    color: blue;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Main Menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdomain.com/page1.html">Sub Menu 1</a>
    <a href="http://wwww.yourdomain.com/page2.html">Sub Menu 2</a>
    <a href="http://wwww.yourdomain.com/page3.html">Sub Menu 3</a>
    <a href="http://wwww.yourdomain.com/page4.html">Sub Menu 4</a>
    <a href="http://wwww.yourdomain.com/page5.html">Sub Menu 5</a>
  </div>
</div>
</body>
</html>

Bu Herva

Selasa, 03 Oktober 2023

Cara Membuat Drop Down Menu CSS Sederhana

Terapkan CSS dan Tambahkan Efek Dropdown

Tidak ada komentar:

Posting Komentar

Welcome in My Blog's