Cara Mudah Membuat Simple Dropdown Menu

loading...

Selamat datang di The Royal Moringa. Postingan di awal Februari ini saya akan membahas mengenai cara pembuatan menu dan sub menu pada blog anda. Menu dan sub menu pasti sudah tidak asing lagi bagi anda karena hampir di seluruh website pasti mempunyai menu navigasi. Istilah lain dari menu navigasi ini adalah dropdown menu. Menu ini berguna untuk mempermudah seseorang menuju halaman tertentu. Mari kita simak langkah-langkahnya.

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

                                  #menubar{ position:relative; line-height:35px; background-color:#006699; height:35px; margin:0 auto; border-bottom:3px solid #cc9900; } @media only screen and (max-width: 480px) { #menubar { display:none; } } #menubar ul{ float:left; margin:0; list-style:none; } #menubar li{ float:left; position:relative; } #menubar ul li a{ float:left; width:150px; text-align:center; text-decoration:none; text-transform:uppercase; color:#fff; font-family:Helvetica; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { background-color:#0066cc; text-decoration:none; } #menubar ul li:hover ul { display:block !important; } #menubar ul li ul{ position:absolute; left:0; top:35px; z-index:100; background-color:#006699; } #menubar ul ul { width:180px; display:none; list-style:none; position:absolute; background-color:#006699; padding-left:0; top:35px; } #menubar ul ul li a{ float:none; display:block !important; padding-left:30px; text-align:left; width:150px; } #menubar ul ul li a:hover{ color:#222; }

2. Setelah itu kita menuju tag body dan cari </header>. Tag header ini merupakan bagian yang mengakhiri judul blog. Copy dan paste kode berikut di bawahnya. Jika anda tidak menemukannya, silakan letakkan kode HTML berikut sebelum kode postingan blog anda, biasanya ditandai dengan kode seperti <div id='main-wrapper'>. Tapi pastikan bahwa sebelum postingan terbaru anda tidak ada widget lainnya.

                                  <div id='menubar'> <ul class='menubar'> <li><a href='xxx'>Home</a></li> <li><a href='xxx'>Berita</a></li> <li><a href='#'>Teknologi</a> <ul class='sub-menu'> <li><a href='xxx'>Sub Menu 3.1</a></li> <li><a href='xxx'>Sub Menu 3.2</a></li> <li><a href='xxx'>Sub Menu 3.3</a></li> </ul> </li> <li><a href='#'>Travel</a> <ul class='sub-menu'> <li><a href='xxx'>Sub Menu 4.1</a></li> <li><a href='xxx'>Sub Menu 4.2</a></li> <li><a href='xxx'>Sub Menu 4.3</a></li> </ul> </li> <li><a href='xxx'>Olahraga</a></li> <li><a href='xxx'>Tentang Kami</a></li> <li><a href='xxx'>Hubungi Kami</a></li> </ul> </div>

3. Silakan ganti xxx dengan URL yang ingin dituju dari menu tersebut dan ganti pula nama menu dan sub menu sesuai dengan kebutuhan anda. Jika anda ingin menambah sub menu, anda cukup copy dan paste kode <li><a href='xxx'>Sub Menu</a></li> di bawah kode-kode serupa dengannya.

4. Save Theme dan lihat hasilnya 

Anda dapat juga mengganti warna dan jenis huruf yang dipakai sesuai keinginan anda. Dropdown menu akan berganti warna ketika salah satu menu disorot oleh pointer mouse anda demikian juga warna huruf pada sub menu. Hal ini bisa anda lihat pada contoh hasil dropdown menu yang saya buat diatas. Demikian postingan kali ini. Terima kasih telah membaca.

loading...