Cara Membuat Menu CSS Dropdown | Warung Komputer. jika Anda ingin memiliki menu CSS dropdown yang sederhana? Kabar baiknya, Anda tidak membutuhkan tambahan JavaScript apapun untuk membuatnya, cukup dengan CSS saja. Dalam tutorial ini Anda akan mempelajari bagaimana cara membuat menu CSS dropdown sederhana dengan mudah.
Cara Membuat Menu CSS Dropdown
Langkah 1 – Membuat file HTML
Pertama, Anda harus membuat file HTML baru (kosong) terlebih dahulu. Dalam tutorial ini kita akan membuat sebuah file baru yang bernama menu.html. Kita akan menggunakan File Manager untuk membuatnya. Namun, hasil yang sama juga bisa Anda dapatkan dengan menggunakan aplikasi FTP client. Buat file menu.html di komputer Anda dan upload ke akun Anda menggunakan aplikasi FTP.
Menu yang akan kita buat terdiri dari 1 elemen induk bernama Main Menu dan 5 sub-elemen. Dengan mengganti URL di dalam atribut href, Anda bisa menghubugkan setiap sub-menu/Child Menu ke halaman-halaman yang berbeda di website Anda. Anda mungkin akan melihat bahwa setiap elemen memiliki class yang berbeda – dropdown, mainmenubtn dan dropdown-child. Class dibutuhkan untuk menerapkan rule CSS yang berbeda.
<div class="dropdown">
<button class="mainmenubtn">Main menu</button>
<div class="dropdown-child">
<a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
<a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
<a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
<a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
<a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
</div>
</div>
Langkah 3 – Membuat CSS dan Efek Dropdown
Kita akan memberikan style untuk kode HTML dengan menggunakan rule CSS berikut ini:
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Seperti yang bisa Anda lihat, class .dropdown-child memiliki rule CSS display:none. Namun, begitu pengunjung mengarahkan kursor (hover) ke (.dropdown:hover) ke induk menu, rule CSS akan langsung berganti menjadi display:block. Ini akan memberikan efek dropdown di menu kita.
Berikut ini adalah tampilan akhir dari file menu.html:
<html>
<head>
<style>
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
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.yourdonain.com/page1.html">Child menu 1</a>
<a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
<a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
<a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
<a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
</div>
</div>
</body>
</html>
Di contoh ini kita akan menggunakan internal stylesheet, artinya style CSS akan kita letakkan di file HTML yang sama. Anda juga bisa mencoba beberapa cara lain untuk mengubungkan file CSS ke HTML. Jangan ragu untuk mencoba berbagai variasi CSS. Anda bisa mengganti warna, ukuran, dll. Sesuaikan semuanya dengan kebutuhan Anda.
Kesimpulan
Setelah menyelesaikan tutorial ini Anda kini telah mempelajari bagaimana cara membuat menu dropdown sederhana hanya dengan menggunakan CSS. Kode yang disediakan dalam tutorial ini sangat ringan dan tidak akan memperberat website Anda sedikitpun.
