Cara Membuat Dropdown Menu Dilengkapi Sub Menu 3 Kolom

loading...

Selamat datang di The Royal Moringa. Pada pertemuan sebelumnya, saya telah membuat artikel mengenai Cara Mudah Membuat Menu Navigasi Simple. Artikel tersebut menjelaskan bagaimana cara membuat menu dan sub menu pada blog. Menubar sendiri lebih dikenal di masyarakat dengan istilah dropdown menu. Nah, kali ini saya akan membahas lebih jauh seputar dropdown menu.

Pada umumnya, dropdown menu terdiri dari parent menu dan child menu (sub menu) yang ditampilkan urut ke bawah sejajar 1 baris. Penggunaan sub menu yang ditampilkan ke bawah sejajar 1 baris tentu tidak efektif jika kita mengisinya dengan banyak menu. Seandainya kita memasang sebuah parent menu yang memiliki sub menu berjumlah 10 buah maka ketika disorot akan tampil 10 buah sub menu berjajar-jajar ke bawah sebanyak 10 baris. Tentu hal ini sangat mengganggu penampilan sehingga kita terpaksa mengurangi jumlah sub menu yang akan kita pasang.

Untuk mengantisipasi jumlah sub menu yang terlalu banyak, kita bisa menggunakan column sub menu sebagai solusi yang sederhana. Column sub menu adalah sub menu yang ditampilkan dalam kolom dan baris.Sub menu yang sederhana hanya memuat 1 kolom sedangkan column sub menu bisa memuat lebih dari 1 kolom. Selain untuk menghemat ruang vertikal, anda juga dapat memanfaatkan column sub menu untuk mengkategorikan post/page yang anda buat sehingga tampak lebih rapi dan terstruktur. Tentu saja ini akan mempermudah pembaca dalam mencari halaman yang dimaksud. Berikut tampilan contoh dari dropdown menu yang memiliki sub menu 3 kolom.

Jika anda tertarik tetapi penasaran dengan cara membuatnya, silakan anda simak langkah-langkah membuat menubar dengan sub menu berkolom berikut.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > kemudian cari ]]></b:skin> lalu copy dan paste kode script berikut di atasnya

                                      #menubar{ position:relative; background-color:#f5f5f5; height:35px; margin:0 auto; font-family:'Oswald',sans-serif; line-height:35px; } #menubar ul{ float:left; margin:0; list-style:none; } #menubar li{ float:left; position:relative; } #menubar ul li a{ float:left; width:180px; text-align:center; text-decoration:none; color:#333333; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { border-bottom:2px solid #c0c0c0; } #menubar ul li:hover ul { display:block !important; } #menubar ul li ul{ position:absolute; left:0; top:37px; z-index:100; background-color:#f5f5f5; } #menubar ul ul { width:600px; display:none; list-style:none; position:relative; background-color:#f5f5f5; padding-left:0; top:35px; } #menubar ul ul li a{ float:none; display:block !important; padding-left:30px; text-align:left; width:170px; } #menubar ul ul li a:hover{ border-bottom:none; border-left:2px solid #c0c0c0; } .left-col{ float: left; margin-left:0; width:200px; } .center-col{ float: left; width: 200px; margin-left: 0; } .right-col{ float: right; width: 200px; margin-left:0; } #menubar ul li ul h2{ border-bottom:2px solid #dddddd; margin:1px; padding:10px 0 6px 5px; color:#333333; font-size:16px; line-height:20px; font-family:'Oswald',sans-serif; font-weight:bold; text-decoration:none; } @media screen and (max-width: 768px) { #menubar{ display:none;} }

2. Selanjutnya silakan cari </header>. Copy dan pastekan kode script HTML berikut di bawahnya. Jika anda sebelumnya sudah mempunyai menubar maka anda tinggal mengganti seluruh kode yang ada dengan kode berikut tanpa perlu mengubah letak/posisi kode menubar anda miliki. Pada umumnya kode script menubar terletak sebelum kode postingan blog anda yang ditandai dengan <div id='main-wrapper'>.

                                      <div id='menubar'> <ul class='menubar'> <li><a href='xxx'>Home</a></li> <li><a href='#'>Menu 1</a> <ul class='sub-menu'> <div class="left-col"> <h2 class='title'> Judul 1</h2> <li><a href='xxx'>Sub Menu 1</a></li> <li><a href='xxx'>Sub Menu 2</a></li> <li><a href='xxx'>Sub Menu 3</a></li> </div> <div class="center-col"> <h2 class='title'> Judul 2</h2> <li><a href='xxx'>Sub Menu 1</a></li> <li><a href='xxx'>Sub Menu 2</a></li> <li><a href='xxx'>Sub Menu 3/a></li> </div> <div class="right-col"> <h2 class='title'> Judul 3</h2> <li><a href='xxx'>Sub Menu 1</a></li> <li><a href='xxx'>Sub Menu 2</a></li> <li><a href='xxx'>Sub Menu 3</a></li> </div> </ul> </li> <li><a href='#'>Menu 2</a> <ul class='sub-menu'> <div class="left-col"> <h2 class='title'> Judul 1</h2> <li><a href='xxx'>Sub Menu 1</a></li> <li><a href='xxx'>Sub Menu 2</a></li> <li><a href='xxx'>Sub Menu 3</a></li> </div> <div class="center-col"> <h2 class='title'> Judul 2</h2> <li><a href='xxx'>Sub Menu 1</a></li> <li><a href='xxx'>Sub Menu 2</a></li> <li><a href='xxx'>Sub Menu 3</a></li> </div> <div class="right-col"> <h2 class='title'> Judul 3</h2> <li><a href='xxx'>Sub Menu 1</a></li> <li><a href='xxx'>Sub Menu 2</a></li> <li><a href='xxx'>Sub Menu 3</a></li> </div> </ul> </li> <li><a href='xxx'>Menu 3</a></li> <li><a href='xxx'>Menu 4</a></li> <li><a href='xxx'>Menu 5</a></li> </ul> </div>

3. Silakan anda ganti xxx dengan url halaman yang dimaksud dan beri nama pada Menu, Judul, dan Sub Menu sesuai dengan keinginan anda. Jika anda ingin menambahkan sub menu, anda cukup menambahkan kode <li><a href='xxx'>Sub Menu 4</a></li> di bawah kode sub menu sebelumnya.

4. Save Theme dan lihat hasilnya

Anda diperbolehkan untuk mengganti warna text, background, dan border pada kode CSS di atas sesuai dengan selera. Pada tutorial ini saya memberikan 2 Parent Menu yang masing-masing memiliki sub menu berkolom. Seandainya anda ingin menambah sub menu berkolom pada Menu ke-3,4, dan seterusnya silakan anda copy saja kode Menu 1 dari <li><a href='#'>Menu 1</a>...</li> untuk menggantikan kode Menu yang dimaksud. Demikian langkah-langkah untuk membuat menubar dilengkapi sub menu berkolom pada blog. Terima Kasih telah membaca!

loading...