Membuat Menu Drop Down Pada Navigasi

Postingan ini merupakan permintaan dari Paman Helman lewat kotak komentar pada postingan saya sebelumnya, adapun yang dipertanyakan oleh paman Helman yakni tentang bagaimana cara membuat menu drop down pada navigasi. Perhatikan image di samping. Sebelumnya saya minta maaf kepada paman Helman, karena baru sempet posting, akhir-akhir ini saya disibukkan oleh aktifitas saya di dunia nyata ^^. Kembali ke topik, pada navigasi di atas saya menggunakan CSS dan HTML. Dikarenakan menggunakan kode CSS maka kodenya pun lumayan ribet, kurang lebih seperti ini.

#NavbarMenu {
background:#434343; /*-- warna background navigasi --*/
width:900px; /*-- lebar navigasi --*/
height:34px; /*-- tinggi navigasi --*/
color:#ccc; /*-- warna teks navigasi --*/
margin:0 auto;
padding:0;
font:bold 8px Arial,Tahoma,Verdana;
}

#NavbarMenuleft {
width:650px; /*-- lebar menu (biasanya bagian kanan untuk kotak pencarian) --*/
float:left; /*-- posisi menu --*/
margin:0;
padding:0;
}

#nav {
margin:0;
padding-top:3px;
}

#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#nav li {
list-style:none;
margin:0;
padding:0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color:#ccc; /*-- warna teks menu --*/
display:block;
text-transform:uppercase;
margin:0;
padding:9px 15px 8px;
font:bold 12px Arial,Times New Roman;
}

#nav li a:hover, #nav li a:active {
background:#333; /*-- warna background menu drop down --*/
color:#FFF; /*-- warna teks pada menu drop down --*/
margin:0;
padding:9px 15px 8px;
text-decoration:none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#333; /*-- warna background menu drop down --*/
width:150px; /*-- lebar menu drop down --*/
color:#ccc; /*-- warna teks pada menu drop down --*/
text-transform:lowercase;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #131313; /*-- warna border bawah pada menu drop down --*/
border-left:1px solid #131313; /*-- warna border kiri pada menu drop down --*/
border-right:1px solid #131313; /*-- warna border kanan pada menu drop down --*/
font:normal 14px Georgia,Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background:#434343; /*-- warna background aktif menu drop down --*/
color:#fff; /*-- warna teks aktif pada menu drop down --*/
padding:7px 10px;
}


#nav li {
float:left;
padding:0;
}

#nav li ul {
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; /*-- lebar menu drop down --*/
margin:0;
padding:0;
}


#nav li ul a {
width:140px; /*-- lebar menu drop down --*/
}

#nav li ul ul {
margin:-32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}

#nav li:hover, #nav li.sfhover {
position:static;
}

* Silakan sesuaikan dengan template anda semua kode yang saya beri warna merah.

     Copy kode di atas lalu simpan dulu di note atau editor text lainnya. Kemudian ikuti langkah berikut.

1. Login akun blogger anda.
2. Klik Tata Letak, kemudian klik Edit HTML
3. Expand widget template, setelah prosesnya selesai, cari kode berikut ]]
4. Letakkan kode yang anda copy tadi tepat di atas kode ]]
5. Copy kode di bawah ini
   
   

   <div id='NavbarMenu'>
   <div id='NavbarMenuleft'>
   <ul id='nav'>
   <li><a href='URL'>Menu 1</a></li>
   <li><a href='URL'>Menu 2</a></li>
   <li><a href='#'>More &#187;</a>
   <ul>
   <li><a href='#'>Menu Drop Down 1#1&#187;</a>
   <ul>
   <li><a href='#'>Menu Drop Down 2#1 &#187;</a>
   <ul>
   <li><a href='URL'>Menu Drop Down 3#1</a></li>
   <li><a href='URL'>Menu Drop Down 3#2</a></li>
   </ul>
   </li>
   <li><a href='URL'>Menu Drop Down 2#2</a></li>
   </ul>
   </li>
   <li><a href='URL'>Menu Drop Down 1#2</a></li>
   </ul>
   </li>
   </ul>
   </div>
   </div>

   
   * Ganti URL dengan url yang anda tuju.
6. Lalu cari lagi kode <div id='header-wrapper'>
7. Apabila anda ingin navigasi berada di atas header, letakkan kode tadi (kode kedua) tepat diatas kode <div id='header-wrapper'>
8. Tetapi apabila anda ingin navigasi berada di bawah header, letakkan kode tadi di bawah kode end tag header-wrapper. </div><!-- end header-wrapper -->
9. Setelah selesai klik Simpan

     Cukup panjang kan kodenya?, ^^ Silakan lihat hasilnya, Semoga bermanfaat...

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts: