Cara Membuat Menu Navigasi Bertingkat Yang Keren + Responsive

By HP Yitno

Navigasi Bertingkat a.k.a Dropdown navigation adalah sebuah menu yang berada di bawah header. Fungsinya adalah menggantikan page statis (laman mandiri) blogspot yang hanya dibatasi sampai enam buah laman saja. Dengan menambahkan fitur ini, kita bisa menempatkan sebanyak mungkin menu yang kita punyai untuk memanjakan pembaca blog.

Kalau dilihat dari tampilan dan fungsinya, menu navbar ini jelas berbeda dengan menu Breadcrumbs Navigation yang hanya muncul di single post dan hanya menyertakan label atau kategori tertentu saja. Jika menu breadcrumbs bertujuan menunjukkan kepada pengunjung tentang tulisan yang sedang dibaca masuk kategori yang mana, maka menu navigasi bertujuan mempermudah pembaca menemukan artikel yang mereka cari.

Meskipun tampilannya sangat bagus, tak banyak sobat blogger yang mau memasangnya. Hal ini karena kode css yang dibutuhkan untuk membuat menu ini sangat banyak sekali. Sebagai akibatnya loading situs akan bertambah berat. Untuk mengatasi masalah ini, aku menyembunyikan laman mandiri blogger dari tampilan desktop namun tetap memunculkannya dalam versi mobile.

Dan berikut cara membuat menu Dropdown Navigation:
1. Login ke www.blogger.com
2. Klik template kemudian tekan cadangkan/pulihkan.
3. Unduh template lengkap kamu untuk menghindari hal-hal yang tidak kita inginkan.
4. Jika sudah tutup kembali menu cadangkan/pulihkan
5. Klik edit html untuk melakukan pengeditan template
6. Cari kode ]]></b:skin> dengan bantuan CTRL + F
7. Tempatkan kode css dibawah ini tepat diatas kode ]]></b:skin>

#search {float:right; padding:4px; display:inline;}
#fixed {position:relative; margin:0px; width:100%; height:33px; background:blue; font-size:13px; font-family:Comic Sans Ms; color:white; font-weight:bold; border-bottom:3px solid #111; box-shadow:0 0 5px white; -moz-box-shadow:0 0 5px white; -webkit-box-shadow:0 0 5px white; -khtml-box-shadow:0 0 5px white; border-radius: 5px;}
#menu {margin: 0px; padding:0px;}
#menu ul, #menu li {float:left; list-style:none; margin:0px; padding:0px;}
#menu li a, #menu li a:link, #menu li a:visited {color:#fae7df; display:block; margin:0px; padding:9px 10px;}
#menu li a:hover, #menu li a:active{background:purple; color:#fff; margin:0px; padding:9px 10px; text-decoration:none;}
#menu li li a, #menu li li a:link, #menu li li a:visited {background:#ED4A05; width:150px; color:#fae7df; font-family:sans-serif; margin:0px; padding:9px 10px; border:1px solid #FF7800;}
#menu li li a:hover, #menu li li a:active {background:purple; color:#fff; padding:9px 10px;}
#menu li ul {z-index:9999; position:absolute; left:-999em; height:33px; width:170px; margin:0px; padding:0px;}
#menu li ul a {width:140px;}
#menu li ul ul {margin:-34px 0 0 170px;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {left:-999em;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul{left:auto;}
#menu li:hover, #menu li.sfhover{position:static;}
#menuku {margin:0px; margin-bottom:-25px; position:relative;}

8. Jika sudah cari kode </header> dengan bantuan CTRL + F
9. Jika sudah pasang kode dibawah ini tepat dibawah kode tersebut
10. Ada dua versi yang saya sajikan disini, silahkan pilih salah satu saja.

Kode Pertama:

<!-- kode menu navigation 1 start -->
<div id='fixed'>
   <div id='menu'>
     <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>Sitemap</a></li>
       <li><a href='#'>Menu</a>
        <ul class='children'>
          <li><a href='#'>Menu 1</a></li>
          <li><a href='#'>Menu 2</a></li>
        </ul>
      </li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
      <li><a href='#'>Menu 5</a></li>
      <li><a href='#'>Menu 6</a></li>
     </ul>
   </div>
 <div id='search'>
  <form action='/search' method='get'>
  <input name='q' placeholder='cari apa kawan...?' size='23' style='font-size: 14px;' type='text'/>
  <input style='font-size:14px;' type='submit' value='search'/>
  </form>
 </div>
</div>
<!-- kode menu navigation 1 end -->

Kode kedua:

<!-- kode menu navigasi 2 start -->
<b:section class='menuku' id='menuku' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML9' locked='false' title='Menu Navigation' type='HTML'>
    <b:includable id='main'>
<div id='fixed'>
   <div id='menu'>
     <ul>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='#'>Sitemap</a></li>
       <li><a href='#'>Menu</a>
        <ul class='children'>
          <li><a href='#'>Menu 1</a></li>
          <li><a href='#'>Menu 2</a></li>
        </ul>
      </li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
      <li><a href='#'>Menu 5</a></li>
      <li><a href='#'>Menu 6</a></li>
     </ul>
   </div>
 <div id='search'>
  <form action='/search' method='get'>
  <input name='q' placeholder='cari apa kawan...?' size='23' style='font-size: 14px;' type='text'/>
  <input style='font-size:14px;' type='submit' value='search'/>
  </form>
 </div>
</div>
</b:includable>
  </b:widget>
</b:section>
<!-- kode menu navigasi 2 end -->

Keterangan:
Ganti tanda # dengan link yang kamu kehendaki
Ganti kata menu dengan tulisan yang kamu suka

Demikianlah tutorial singkat tentang cara bikin menu dropdown navigation yang bisa saya kupas. Semoga dengan adanya artikel ini akan menambah jumlah orang yang suka dengan design web. Dengan begitu indonesia juga akan dikenal sebagai negara yang memiliki intelektual tinggi dalam dunia informasi.

SHARE :