Cara Membuat Menu CSS Dropdown Sederhana - Anontekno

Cara Membuat Menu CSS Dropdown Sederhana

css dropdown

Cara Membuat Menu CSS Dropdown Sederhana

User Experience (UX atau pengalaman pengguna) serta kecepatan akses (load time) suatu website merupakan hal yang sangat berarti. Itu penyebabnya kenapa Kamu sebaiknya tidak membebani website Kamu dengan perlengkapan tambahan seperti JavaScript ataupun gambar- gambar dengan ukuran yang besar. Tetapi, gimana kalau Kamu ingin mempunyai menu CSS dropdown yang sederhana? Berita baiknya, Kamu tidak memerlukan tambahan JavaScript apapun untuk membuatnya, cukup dengan CSS saja. Dalam tutorial ini Kamu akan mempelajari gimana cara membuat menu CSS dropdown sederhana dengan gampang.

Yang Kamu Butuhkan

Saat sebelum memulai tutorial ini, yang Kamu butuhkan yaitu:

  • Akses ke control panel hosting Kamu

Tahap 1 – Membuat file HTML

Pertama, Kamu harus membuat file HTML baru( kosong) terlebih dulu. Dalam tutorial ini kita akan membuat suatu file baru yang bernama menu. html. Kita akan memakai File Manager untuk membuatnya. Tetapi, hasil yang serupa juga dapat Kamu dapatkan dengan menggunakan aplikasi FTP klien. Buat file menu. html di komputer Kamu serta upload ke account hosting Kamu menggunakan aplikasi FTP.

Tahap 2 – Menambahkan kode menu HTML

Menu yang akan kita buat terdiri dari 1 elemen awal bernama Main Menu dan 5 sub- elemen. Dengan mengganti URL di dalam atribut href, Kamu dapat menghubugkan tiap sub- menu atau Child Menu ke halaman- halaman yang berbeda di website Kamu. Kamu mungkin akan melihat bahwa tiap elemen mempunyai class yang berbeda– dropdown, mainmenubtn serta dropdown- child. Class diperlukan 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>

Menu HTML akan kelihatan seperti ini apabila tanpa rule CSS:

Seperti yang Kamu lihat, menu HTML yang polos belum dioptimasi serta tampilannya pun masih tidak menarik. Tetapi, kita akan segera membuat rule CSS serta mengubah tampilannya di langkah selanjutnya.

Tahap 3 – Membuat CSS serta 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 dapat Kamu lihat, class. dropdown-child mempunyai rule CSS display:none. Tetapi, begitu pengunjung mengarahkan kursor(hover) ke(.dropdown:hover) ke induk menu, rule CSS akan langsung berganti jadi display: block. Ini akan memberikan efek dropdown di menu kita.

Berikut ini merupakan 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, maksudnya style CSS akan kita taruh di file HTML yang sama. Kamu juga dapat mencoba beberapa cara lain untuk mengubungkan file CSS ke HTML.

Setelah Kamu selesai, hasilnya akan kelihatan seperti ini:

Janganlah ragu untuk mencoba berbagai modifikasi CSS. Kamu dapat mengubah warna, ukuran, dan lain- lain. Sesuaikan semuanya dengan kebutuhan Kamu.

Kesimpulan

Setelah menyelesaikan tutorial ini Kamu saat ini sudah mempelajari bagaimana cara membuat menu dropdown sederhana hanya dengan memakai CSS. Kode yang disajikan dalam tutorial ini sangat ringan serta tidak akan memperberat website Kamu sedikitpun.