Membuat Menu Navigasi Dropdown Dengan CSS
Entah kenapa saya ingin membuat tutorial tentang edit template, mempercantik blog, dan hal-hal lainnya yang berhubungan dengan tampilan antar muka atau user interface. Tetapi yang membuat susah itu karena struktur setiap orang pasti berbeda-beda. Belum tentu juga yang saya tulis pada artikel ini akan berhasil 100% di template masing-masing.
Memang tutorial seperti ini banyak beredar di mesin pencari google, tapi semoga masih ada yang membutuhkannya.
Cara Membuat Menu Navigasi Dropdown CSS Tanpa Javascript
Menu dropdown akan muncul ketika kita menyorot menu utamanya dan ini bisa dilakukan hanya menggunakan CSS tanpa javascript. Pasti bagus kan? karena dengan penggunaan Javascript yang terlalu banyak akan membuat kecepatan loading blog berkurang atau lemot.
1. Kode CSS
Tambahkan kode ini sebelum </style>.
/* Style tombol utama by Mas Malven*/
.dropbtn {
background-color: #2196f3;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Warna background dari tombol utama */
.dropdown:hover .dropbtn {
background-color: #006947;
}
/* Isi dari <div> - Memposisikan isi konten dropdown {
position: relative;
display: inline-block;
}
/* Isi konten dropdown (disembunyikan) */
.dropdown-content {
display: none;
position: absolute;
background-color: #2f303f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Link di dalam menu dropdown */
.dropdown-content a {
color:#fff;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Warna link */
.dropdown-content a:hover {
background-color:#008c5f;
color: #fff !important;
}
/* Tampilkan isi konten dopdown ketika disorot */
.dropdown:hover .dropdown-content {
display: block;
}
2. Kode HTML
HTML adalah kode untuk membuat menu navigasi dropdown basic. Anda bisa menghapus atau menambah Menu dan SubMenu. Kode ini harus disimpan setelah <body>.
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
<a href="#">Sub Menu 3</a>
</div>
</div>
Demo/Preview
Anda bisa melihat Demo/Preview di codepen yang sudah saya sediakan di bawah ini. Bagaimana cara membuat dropdown bertingkat? Itu bisa kalian ulik sendiri.
Mudah sekali bukan? Pada dasarnya Anda harus menyesuaikan sendiri dengan template yang dipakai. Semoga bermanfaat.