Hampir semau template jaman sekarang memiliki sebuah fitur yang bernama Menu Dropdown. Menu dropdown merupakan sebuah menu yang memiliki submenu, sehingga mampu menampung banyak kategori di dalamnya.
Bukan hanya itu, beberapa orang juga mengaitkan menu dropdown menjadi salah satu faktor penyebab diterima atau tidaknya akun Adsense saat masa Review. Semakin lengkap dan padat isinya, semakin besar peluang untuk diterima.
Nah salah satu tantangan yang dihadapi ketika membuat dan memasang menu dropdown ialah, hampir semua dari widget ini menggunakan JavaScript, sehingga ukurannya lumayan besar. Bahkan, template-template yang terkenal seperti Arlina menggunakan jQuery, sehingga ukurannya jauh lebih besar.
Selain itu, penggunaan jQuery juga beresiko menu dropdown tidak bisa di klik atau rusak, karena anda mengotak-atik jQuery tadi.
Oleh karenanya, kali ini saya ingin berbagi tutorial serta cara membuat menu dropdown yang responsif dan super ringan. Saya katakan super ringan karena sama sekali tanpa Javascript, apalagi jQuery. Bila ukuran rata-rata menu dropdown yang menggunakan jQuery sekitar 100KB, ukuran menu yang pure CSS ini hanya 2KB saja.
Untuk Live Demonya, silakan anda lihat disini:
Langsung saja, berikut cara membuatnya.
Membuat Menu Dropdown / Sub Menu Ringan & Pure CSS
Silakan anda buka Edit HTML, lalu tempatkan kode berikut diatas </head> atau <head/>
<style>
#navigation li {font-size:15px;font-weight:700;text-transform:uppercase;}
nav.jarwonavigasi {display:inline-block;width:100%;border-bottom: #E5E5E5 2px solid;background:#fff}
nav.jarwonavigasi .show-menu,nav.jarwonavigasi li a{text-decoration:none;text-align:center}
nav.jarwonavigasi ul{list-style-type:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center}
nav.jarwonavigasi li{display:inline-block;float:left}
nav.jarwonavigasi li a {display:block;height:50px;line-height:50px;color:#222;font-weight:700}
nav.jarwonavigasi li a:link {color:#222 !important}
nav.jarwonavigasi li a.drop:after {content:"=";margin-left:15px}
nav.jarwonavigasi li:hover a,nav.jarwonavigasi li:hover ul a:hover{background:#19c589;color:#fff}
nav.jarwonavigasi li:hover ul a{background:#f3f3f3;color:#2f3036;height:40px;line-height:40px}
nav.jarwonavigasi li ul{opacity:0;position:absolute;display:none;}
nav.jarwonavigasi li ul li{display:list-item;float:none;position:relative}
nav.jarwonavigasi li ul li a{width:auto;min-width:100px;padding:0 20px}
.hidden:hover,nav.jarwonavigasi ul li a:hover+.hidden{opacity:1;display:block;z-index:1000}
nav.jarwonavigasi .show-menu{color:#fff;background:#19c589;padding:10px 0;display:none}
nav.jarwonavigasi input[type=checkbox]{display:none;-webkit-appearance:none}
nav.jarwonavigasi input[type=checkbox]:checked~#menu{display:block}
@media screen and (min-width :760px){
nav.jarwonavigasi li a {padding:0 30px;}
}
@media screen and (max-width :760px){
nav.jarwonavigasi .show-menu,nav.jarwonavigasi li ul li{display:block}
nav.jarwonavigasi ul{position:static;display:none}
nav.jarwonavigasi li a,nav.jarwonavigasi ul li{width:100%;background:#eaeaea}
nav.jarwonavigasi li ul{position:initial;display:none}
nav.jarwonavigasi li ul li{position:relative}
}
</style>
Simpan template. Sekarang, silakan tempatkan kode berikut dimana anda ingin menampilkan menu dropdown. Bisa di dalam widget HTML/JavaScript tata letak, dibawah </header>, di bawah body, dan lainnya.
<nav class='jarwonavigasi'> <label class='show-menu' for='show-menu'>Menu</label> <input id='show-menu' role='button' type='checkbox'/> <ul id='menu'> <li> <a class='drop'>Dropdown 1</a> <ul class='hidden'> <li><a href='#'>Submenu Dropdown 1.1</a></li> <li><a href='#'>Submenu Dropdown 1.2</a></li> </ul> </li> <li><a href='#'>Menu</a></li>
<li><a href='#'>Buy This Template</a></li> </ul> </nav>
Pengaturan:
- Tempatkan link pada kode yang saya beri mark kuning.
- Ubah tulisan yang berwarna biru dengan judul menu anda.
Bagi yang ingin menambahkan menu biasa (tanpa dropdown), bisa menambahkan kode berikut di dalam
<ul id='menu'>.<li><a href='#'>Menu</a></li>
Sedangkan bila anda ingin menambahkan menu dengan sub (dengan dropdown), anda bisa menambahkan kode berikut di dalam
<ul id='menu'><li> <a class='drop'>Dropdown 1</a> <ul class='hidden'> <li><a href='#'>Submenu Dropdown 1.1</a></li> <li><a href='#'>Submenu Dropdown 1.2</a></li> </ul> </li>
Simpan template dan lihat hasilnya. Bagaimana? Mudah saja bukan cara memasangnya? Script inilah yang juga saya pakai pada template kedua saya yang bernama Jarwo Education.