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.

Posted by Hii Sekai