Laman

Oktober 09, 2012

Menu Navigasi Horizontal dan Dropdown

Untuk memudahkan navigasi pengunjung, sering sekali kita menemui menu yang berbentuk horizontal maupun vertikal berada pada suatu tempat tertentu dalam situs web atau blog. Menu tersebut apabila diklik akan mengarah ke halaman tertentu yang dibentuk dalam suatu Uniform Resource Locator (URL) unik. Pun tidak jarang menu tersebut memiliki ‘anak menu’, selanjutnya akan kita sebut dengan istilah dropdown.

Ketika Anda menggunakan pagelist menu bawaan Blogger™ — akan diperlihatkan suatu hal menarik — yakni jika halaman yang ditampilkan sesuai URL dalam menu (active), maka menu akan tampil berbeda dengan yang lain seperti warna latar, huruf tebal, dan sebagainya. Optimasi blog menamakannya dengan sebutan selected. Mungkin yang menjadi penyebab kurangnya penggunaan pagelist — sampai posting ini diterbitkan — oleh karena belum mendukung dropdown. Entah jika kita memasukkannya secara manual (red: CMIIW). Alternatifnya dengan membuat menu baru yang biasanya menggunakan daftar urut. Bagaimana cara membuatnya?

HTML (HyperText Markup Language)

<nav id='menu-navigation'>
 <ul>
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
 <b:else/>
  <li class='selected'><a expr:href='data:blog.homepageUrl'>Home</a></li>
 </b:if>
 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Item 1</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Item 1</a></li>
 </b:if>
 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Item 2</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Item 2</a></li>
 </b:if>
  <li><a href='#'>Drop Down</a>
   <ul>
    <li><a href='#'>Down 1</a></li>
    <li><a href='#'>Down 2</a></li>
    <li><a href='#'>Drop 3</a>
     <ul>
      <li><a href='#'>Drop 3.1</a></li>
      <li><a href='#'>Drop 3.2</a></li>
      <li><a href='#'>Drop 3.3</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</nav>

Rubah kode yang diberi warna merah dengan url tujuan (misalnya: h**p://namablog.blogspot.com/p/about), dimana url tersebut harus sama tiap tag kondisional, seperti grup kode yang ditandai dengan warna buram (abu-abu). Sedangkan kode berwarna hijau merupakan teks yang ditampilkan dalam menu.

CSS (Cascading Style Sheets)

#menu-navigation {
 border-bottom: 1px solid #d3d3d3;
 border-top: 1px solid #d3d3d3;
 clear: both;
 display: block;
 float: left;
 margin: 0 auto;
 width: 100%;
}
#menu-navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#menu-navigation li {
 float: left;
 position: relative;
}
#menu-navigation a {
 color: #666;
 display: block;
 line-height: 3em;
 padding: 0 1.5em;
 text-decoration: none;
}
#menu-navigation ul ul {
 box-shadow: 0 3px 3px rgba(0,0,0,.2);
 display: none;
 float: left;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 3em;
 left: 0;
 z-index: 99999;
}
#menu-navigation ul ul ul {
 left: 100%;
 top: 0;
}
#menu-navigation ul ul a {
 background: #f9f9f9;
 border-bottom: 1px dotted #ddd;
 font-weight: normal;
 height: auto;
 line-height: 1.5em;
 padding: .375em .375em .375em 1.5em;
 width: 150px;
}
#menu-navigation ul li:hover > ul {
 display: block;
}
#menu-navigation li:hover > a,
#menu-navigation ul ul :hover > a,
#menu-navigation a:focus,
#menu-navigation a:active,
#menu-navigation .selected  > a {
 background-color: #eee;
 color: #111;
}

Tautan demo dapat Anda simak pada menu navigasi MiMspot. Untuk kode yang berwarna hijau merupakan tampilan menu jika aktif & warna merah merupakan warna latar untuk mengantisipasi penggunaan gambar (icon) pada menu.

14 komentar:

  1. terima kasih atas tutorialnya, akan saya pergunakan menu dropdownnya pada template blogspot saya

    BalasHapus
  2. Berkunjung nih bang,mantef artikelnya suka banget aku bang.

    BalasHapus
    Balasan
    1. Terima kasih, walaupun posting di atas cuma reply dari posting sebelumnya. Blog pian menginspirasi, meskipun dari sebagian kecil posting dapat menimbulkan pro dan kontra. Apalagi jika pokok utamanya tentang SEO.

      Hapus
  3. Maaf sebelumnya gan yang anda suguhkan ini adalah saduran dari NAVIGASI SHADOW yang terbit tahun 2001 yang mana navigasi ini membuat blog semakin berat tidak jarang overtrack pula,kalau di era sekarang tidak dipakai lagi cara ini boleh dikatakan ini adalah PRODUK GAGAL jadi percuma kalau dipasang.

    BalasHapus
    Balasan
    1. Apa benar, gan atau agan hanya mencari popularitas dengan cara memberikan komentar negatif agar orang lain mengunjungi situs Anda. Maksud saya seperti ini, jika tanggapan agan benar seharusnya agan memberikan referensi yang cukup — saya sudah menyediakan beberapa input tag HTML yang dapat diperkenankan, seperti mengisi tautan pada komentar — agar saya serta pengunjung lain mendapat masukan baru.

      NAVIGASI SHADOW yang seperti apa, semua menu navigasi menggunakan CSS dan tidak menggunakan script. Dimana dasarnya agan memberi komentar “blog semakin berat”. Pun Shadow hanya dipakai pada menu dropdown, tidak digunakan secara keseluruhan. Jika seluruhnya digunakan pun, saya rasa masih ringan. Meskipun tahun 2001 — seperti yang agan katakan — jika masih bisa serta sesuai digunakan pada masa sekarang dan hal itu memberikan input/masukan baru, saya rasa juga tidak menjadi masalah.

      PRODUK GAGAL — jika produk gagal, apakah agan sering mengunjungi beberapa situs berbasis WP pada saat ini (masa sekarang) dengan menggunakan pengkodean yang serupa untuk navigasi. Lagi-lagi agan memberikan komentar yang tak beralasan.

      Hapus
  4. Sdh ane terapkan diblog ane namun hasilnya mengecewakan sob jadi ane hapus saja blog ane makin berat setelah ane cek di loading blog.

    BalasHapus
    Balasan
    1. Ya, silakan dipakai atau tidak dipakai juga tidak masalah gan. Rupanya sudah musim menjaring trafik lewat direct link dengan memberikan komentar aneh. Tapi terima kasih, agan sudah menginpirasi saya. :)

      Hapus
  5. terima kasih buat ilmu & il,unya ?
    semoga bermnfaat nih!
    lam knal & sukses?

    BalasHapus
    Balasan
    1. Terima kasih, agan Rey. Salam kenal juga dari saya dan semoga agan juga sukses :D

      Hapus
  6. Thanks sob...brguna banget untuk menambah referensi coding..

    BalasHapus
  7. makasi bos, lama gak pegang pemograman web, jadi lupa, setelah baca tulisannya jadi inget..

    BalasHapus