Tutorial cara membuat menu dropdown di blogger, kali ini saya akan share tutorial membuat dropdown /sub menu atau show hide pada menu navigation website. Untuk membuat menu dropdown kita bisa menggunakan CSS, Javascript, jQuery / pure HTML.
Pada tutorial kali ini saya akan menuusun artikel dari mulai kita membuat sebuah menu biasa tanpa dropdown / kita mulai dari 0 (Nol) sampai menu bar drop down bisa dipakai pada blog.
Langkah pertama, kita membuat kerangka menu navigation / menu bar
HTML
<nav class='menubar'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
Keterangan
<li><a href="#">Home</a></li>
Tanda # (Pagar) Kalian ganti dengan link tujuan
Tulisan Home / Menu1 Kalian ganti dengan judul Menu
Setelah kita membuat struktur dasar menu bar, kita lanjut menambahkan sedikit css agar tampilannya lebih teratur.
CSS
nav.menubar ul{
list-style:none;
position:relative;
width:100%;
display:block;
box-sizing:border-box;
background:#fafafa
}
nav.menubar li{
display: inline-block;
position: relative
}
nav.menubar li a{
padding: 5px 10px;
text-decoration:none;
color:#777;
display:block
}
Lalu bagaimana kita menambahkan dropdown pada menu tersebut?
Untuk membuat dropdown, ada banyak cara. Kita bisa membuatnya dengan CSS, Javascript, jQuery / Pure HTML.
dan kita juga bisa mengatur apakah dropdown tersebut nanti akan muncul ketika Cursor (Pointer) menyentuh / berada pada menu drop down (Hover).
atau kita bisa memunculkan dropdown menu dengan cara mengklik Judul menu dropdown tersebut (OnClick)
Nah untuk membuat dropdown, di tutorial kali ini saya hanya menggunakan css, tanpa javascript / jquery.
Kita gunakan kode HTML di atas dan tambahkan menu drop down sehingga kodenya menjadi seperti dibawah ini..
HTML
<nav class='menubar'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li class=' submenu'><a href="#">Menu2</a>
<ul class='dropdown'>
<li><a href='#'>Dropdown1</a></li>
<li><a href='#'>Dropdown2</a></li>
<li><a href='#'>Dropdown3</a></li>
</ul>
</li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
Keterangan
Kalian bisa menaro Dropdown menu di awal tengah / akhir menu bar kalian.
Kalian cukup memindahkan kode dropdown berikut di tempat yang kalian inginkan
HTML
<li class='submenu'><a href="#">Menu2</a>
<ul class='dropdown'>
<li><a href='#'>Dropdown1</a></li>
<li><a href='#'>Dropdown2</a></li>
<li><a href='#'>Dropdown3</a></li>
</ul>
</li>
Nah, untuk mengaktifkan dropdown di atas, kalian bisa gunakan CSS dibawah ini.
CSS
nav.menubar li.submenu ul.dropdown {
display: none;
padding: 0px;
position: absolute;
}
nav.menubar li.submenu:hover ul.dropdown{
display:block
}
nav.menubar li.submenu ul.dropdown li{
display:block;
width: 200px;
background: beige;
}
CSS ini kita menggunakan hover. Cara kerjanya nanti ketika cursor menyentuh Menu2 maka dropdownnya akan muncul dan ketika cursor berpindah dropdownnya akan menghilang.
Nah untuk membuat menu dengan hover sudah selesai dan hasil akhirnya seperti berikut.
HTML + CSS
<!--CSS-->
<style type='text/css'>
nav.menubar ul{
list-style:none;
position:relative;
width:100%;
display:block;
box-sizing:border-box;
background:#fafafa
}
nav.menubar li{
display: inline-block;
position: relative
}
nav.menubar li a{
padding: 5px 10px;
text-decoration:none;
color:#777;
display:block
}
nav.menubar li.submenu ul.dropdown {
display: none;
padding: 0px;
position: absolute;
}
nav.menubar li.submenu:hover ul.dropdown{
display:block
}
nav.menubar li.submenu ul.dropdown li{
display:block;
width: 200px;
background: beige;
}
</style>
<!--HTML-->
<nav class='menubar'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li class='submenu'><a href="#">Menu2</a>
<ul class='dropdown'>
<li><a href='#'>Dropdown1</a></li>
<li><a href='#'>Dropdown2</a></li>
<li><a href='#'>Dropdown3</a></li>
</ul>
</li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
Untuk melihat tampilannya kalian bisa buka link berikut ini Demo Dropdown on Hover
Tapi buat kalian yang ingin membuat dropdown muncul ketika menu di klik (show hide on click), kita bisa gunakan tutorial dibawah ini. Menubar Dropdown on click pure css
Membuat dropdown muncul ketika menu di klik
Untuk membuat menunya kalian cukup mengganti kode menu dropdown ↑ di atas tadi dengan kode dibawah ini.
HTML
<li class='submenu'><label class="openmenu" for="openmenu">Menu2</label>
<input id="openmenu" role="button" type="checkbox">
<ul class='dropdown'>
<li><a href='#'>Dropdown1</a></li>
<li><a href='#'>Dropdown2</a></li>
<li><a href='#'>Dropdown3</a></li>
</ul>
</li>
Disini kita menggunakan checkbox jadi ketika checkbox itu di klik (di centang) maka dropdownnya akan muncul.
Untuk mengaktifkannya, kalian gunakan css dibawah ini..
CSS
nav.menubar li.submenu .openmenu{
cursor:pointer
}
nav.menubar li.submenu ul.dropdown {
display: none;
padding: 0px;
position: absolute;
}
nav.menubar input[type="checkbox"]{
display:none
}
nav.menubar li.submenu #openmenu:checked ~ ul.dropdown{
display:block
}
nav.menubar li.submenu ul.dropdown li{
display:block;
width: 200px;
background: beige;
}
Untuk mencobanya, kalian bisa copy kode menu bar dropdown onclick dibawah ini ke template kalien.
HTML + CSS
<!--CSS-->
<style type='text/css'>
nav.menubar ul{
list-style:none;
position:relative;
width:100%;
display:block;
box-sizing:border-box;
background:#fafafa
}
nav.menubar li{
display: inline-block;
position: relative
}
nav.menubar li a{
padding: 5px 10px;
text-decoration:none;
color:#777;
display:block
}
nav.menubar li.submenu .openmenu{
cursor:pointer
}
nav.menubar li.submenu ul.dropdown {
display: none;
padding: 0px;
position: absolute;
}
nav.menubar input[type="checkbox"]{
display:none
}
nav.menubar li.submenu #openmenu:checked ~ ul.dropdown{
display:block
}
nav.menubar li.submenu ul.dropdown li{
display:block;
width: 200px;
background: beige;
}
</style>
<!--HTML-->
<nav class='menubar'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu1</a></li>
<li class='submenu'><label class="openmenu" for="openmenu">Menu2</label>
<input id="openmenu" role="button" type="checkbox">
<ul class='dropdown'>
<li><a href='#'>Dropdown1</a></li>
<li><a href='#'>Dropdown2</a></li>
<li><a href='#'>Dropdown3</a></li>
</ul>
</li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</nav>
Untuk melihat tampilannya kalian bisa buka link berikut ini Demo Dropdown on Click
Menu bar dropdown di atas hanya struktur dasarnya saja. Kalian bisa mendesainnya menjadi responsive dan juga lebih bagus lagi..
Setelah postingan ini, nanti saya akan share beberapa menu bar dropdown responsive yang bisa kalian pasang tanpa harus masuk ke edit html
Cukup sekian artikel tentang cara membuat menu dropdown / submenu di blog ini semoga bermanfaat.
Apabila ada yang tidak di mengerti, silahkan bertanya di kolom komentar.