Cara Membuat Menu Hoverable Dropdown Pure CSS

Hallo guys, berjumpa lagi dengan saya. Pada artikel kali ini saya memberitahukan bagaimana cara membuat menu hoverable dropdown yang pembuatannya hanya menggunakan CSS.

cara membuat menu hoverable dropdown pure css

Mungkin dari kalian ada yang bertanya – tanya, apa si itu hoverable dropdown?

Hoverable Dropdown atau juga bisa disebut menu datar melayang, adalah sebuah elemen grafis yang memuat banyak isi menu ketika menu ini dibuka.

Keunggulan dari hoverable dropdown ini sendiri selain sebagai penyimpan banyak menu, hoverable dropdown juga mempunyai posisi melayang, yang berarti ini memungkinkan pembuat untuk meminimalisir terpakainya banyak ruang.

Ketika hoverable dropdown tidak aktif, maka yang akan ditampilkan hanya satu element saja.

Setelah mengetahui apa itu hoverable dropdown beserta fungsinya. Lalu bagaimana cara membuatnya?.

Baiklah sebelum ke langkah pembuatan saya ingin membahas sedikit dulu tentang pembuatan hoverable dropdown ini.

Seperti yang sudah saya jelaskan diatas bahwa pembuatan hoverable dropdown ini hanya menggunakan css tidak menggunakan javascript, jquery atau semacamnya.

Sehingga, dengan pembuatan yang hanya menggunakan css ini pastinya tidak akan terlalu berpengaruh buruk terhadap loading blog atau web dibandingkan jika menggunakan javascript.

Berbeda dengan web tutorial kebanyakan yang hanya memberikan kode – kode tanpa detailnya pembuatan, disini saya akan menerangkan pembuatan hoverable dropdown secara terperinci, yang bertujuan agar mudah dipahami.

Agar tidak bentrok saya juga akan membagi langkah-langkah ke dalam dua bagian, yaitu bagian pembuatan html dan bagian pembuatan css.

Untuk yang sudah penasaran bagaimana cara pembuatan, silakan simak langkah-langkahnya berikut ini.

Cara Membuat Menu Hoverable Dropdown Pure CSS

Pembuatan HTML

1. Pertama – tama kita buat terlebih dahulu sebuah container berelemen div sebagai wadah untuk tombol beserta isi menu yang akan kita buat nantinya.

<div> </div>

Agar memudahkan saat pemberian Style kita tambahkan juga sebuah class kedalam elemen tadi. Contoh saya akan menamai classnya dropdown sehingga akan menjadi seperti ini:

<div class=”dropdown”>

</div>

2. Sekarang kita buat sebuah elemen button di dalam elemen sebelumnya sebagai patokan pembuka isi menu. Tandai juga dengan class agar memudahkan saat pemberian style, contoh:

<button class=”dropbtn”> Dropdown </button>

Dan jika digabungkan dengan elemen pertama akan menjadi seperti ini

<div class=”dropdown”>
<button class=”dropbtn”> Dropdown </button>
</div>

3. Sekarang kita buat kembali elemen untuk disimpan kedalam elemen pertama. Elemen ini berfungsi sebagai wadah dari tautan – tautan yang ingin ditampilkan. Jangan lupa untuk menandai dengan class agar memudahkan pemberian Style, contoh:

<div class=”dropdown-content”>
</div>

Dan jika digabungkan menjadi seperti ini

<div class=”dropdown”>
<button class=”dropbtn”> Dropdown </button>
<div class=”dropdown-content”>
</div>
</div>

4. Langkah akhir dalam pembuatan hoverable dropdown HTML ini adalah memberikan tautan. Untuk menampilan tautan kita buat elemen (a). Contoh:

<a href=”www.tautan.com”> Nama Tautan </a>

Sebelum menyatukan ke elemen sebelumnya, tentukan terlebih dahulu berapa tautan yang ingin ditampilkan. Jika ingin lebih dari satu, tinggal duplikat saja elemen di atas. contoh:

<a href=”www.tautan.com”> Nama Tautan </a>
<a href=”www.tautan2.com”> Nama Tautan 2 </a>
<a href=”www.tautan3.com”> Nama Tautan 3</a>

Sekarang copy ketiga tautan di atas dan pastekan di dalam elemen class .content-dropdown (terdapat pada langkah 3). Sehingga menjadi:

<div class=”dropdown”>
<button class=”dropbtn”> Dropdown </button>
<div class=”dropdown-content”>
<a href=”www.tautan.com”> Nama Tautan </a>
<a href=”www.tautan2.com”> Nama Tautan 2 </a>
<a href=”www.tautan3.com”> Nama Tautan 3</a>
</div>
</div>

Pembuatan HTML sudah selesai sekarang kita tinggal memberika style saja pada masing – masing elemen diatas, agar dropdown berfungsi dan tampilan enak dilihat.

Pemberian CSS / Style

Untuk pemberian css / Style disini saya akan mengurutkan sesuai nomer – nomer pada langkah HTML diatas.

1. Pertama, sama dengan pada langkah pembuatan HTML (langkah pertama), jadi kita akan memberikan style terlebih dahulu pada class .dropdown. Saya ingin memberikan style seperti ini

.dropdown {
position: relative;
display: inline-block;
}

keterangan: Karena isi menu yang akan kita buat ini melayang, jadi kita tambahkan position: relative agar isi menu nanti tidak keluar saat di buka. Dan kita juga menambahkan display: block agar tidak ada elemen luar lain yang menyatu.

2. kedua, berarti kita memberikan style pada .dropbtn. Saya akan memberikan style seperti berikut:

.dropbtn {
background-color: orange;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}

keterangan:

  • Background-color adalah warna latar belakang. Disitu kita menambahkan dengan warna orange
  • Color adalah warna untuk text. disitu kita mengatur warna white atau putih
  • Padding berfungsi sebagai pemberi jarak text dengan elemen. disitu kita isi dengan nilai pixel 16px
  • Font-size adalah ukuran font / huruf. disitu kita mengatur 16px juga
  • Border merupakan garis pinggir yang sering digunakan untuk membingkai bagian isi. karena kita tidak ingin memakainya maka disitu kita atur none

3. Untuk mempersingkat waktu disini saya anggap kamu sudah mengerti tentang css ya. Sekarang pemberian style pada .content-dropdown

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

keterangan singkat: Pada langkah ini bisa dibilang cukup penting, dimana display kita atur none agar tidak muncul dan position absolute agar elemen melayang

4. berikan style untuk tautan

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

5. Pengakhiran

untuk mengakhiri pemberian Css / Style ini. langkah akhir yang harus kita lakukan adalah memberikan selector hover pada elemen pertama agar isi menu bisa tampil.

Sesuai namanya yaitu (Hover)able Dropdown, jadi inti sebenarnya dari dropdown ini adalah bermain hover. langsung saja kita tambahkan

.dropdown:hover .dropdown-content {display: block;}

keterangan: Pada class .dropdown kita tambahkan hover. hover ini akan bereaksi ketika elemen sudah di sentuh. Lalu di ikuti dengan class .dropdown-content untuk isi menu. lihat kembali pada pemberian CSS langkah ke 3.

Disitu kita mengatur display none yang berarti elemen tersebut tidak tampil. nah untuk menampilkannya kembali, maka pada style di atas ini kita mengatur ulang ke display block

Sekarang satukan semua CSS / Style yang sudah kita buat kedalam elemen <style> </style> agar Css bisa digunakan. Sehingga menjadi seperti berikut ini

<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: orange;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {display: block;}
</style>

Terapkan HTML dan CSS yang sudah dibuat ke dalam web atau blog kamu masing – masing. Kamu juga bisa mengembangkannya kembali agar tampilan lebih menarik.

Hasil dari script diatas:

dropdown pure css

Demikian tutorial mengenai Cara membuat Hoverable Dropdown Pure CSS dan sampai jumpa ditutorial berikutnya.