Dasar Pembuatan Menu Horizontal

Diposting ini OB akan sedikit berbagi dengan teman-teman tentang bagaimana membuat menu horizontal menggunakan CSS. Mengapa trik blogger ini OB angkat kembali? Karena banyak minat para blogger mania untuk menghiasi blognya dengan menu-horizontal sesuai dengan keinginan dan karakter blognya masing-masing. Ketika kamu blog walking tentu banyak sekali bertemu trik membuat menu horizontal dengan sistem kode yang berbeda pula, dan sangat dimungkinkan pula kode yang akan OB tampilkan berbeda dengan lainnya (atau bisa pula sama). Nah, agar tak titik air ludah karena membaca paragraf pembuka. Yuk, kita bedah triknya.

Kode CSS (Cascading Style Sheets adalah sebagai berikut :

#menu-navigation {
border-bottom: 1px solid #e3e3e3;
border-top: 1px solid #e3e3e3;
clear: both;
display: block;
float: left;
margin: 0 auto;
width: 100%;
}
#menu-navigation ul {
list-style: none;
margin-bottom: 0;
padding: 0 15px;
}
#menu-navigation li {
float: left;
position: relative;
}
#menu-navigation li.alignright {
float: right;
margin: 0;
}
#menu-navigation a {
color: #666;
display: block;
line-height: 3.1428em;
padding: 0 1.5714em;
text-decoration: none;
}
#menu-navigation ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);
box-shadow: 0 3px 3px rgba(0,0,0,.2);
display: none;
float: left;
margin: 0;
padding: 0;
position: absolute;
top: 3.1428em;
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.5714em;
padding: .39285em  .39285em  .39285em 1.5714em;
width: 152px;
}
#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 .selected  > a {
background-color: #f5f5f5;
color: #111;
}

.selected digunakan untuk mengindikasikan jika URL halaman blog sama dengan URL pada menu navigasi, maka berlaku pengkodean .selected. Sedangkan untuk HTML (HyperText Markup Language) adalah sebagai berikut:

<nav id="menu-navigation">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#"></a>Tentang</li>
  <li><a href="#"></a>Sitemap</li>
  <li><a href="#"></a>Kontak</li>
 </ul>
</nav>

Dengan menggunakan HTML di atas, berarti kita meniadakan fungsi .selected. Pada kasus Blogger.com fungsi .selected dapat diakomodasi dengan menambahkan tag kondisional tiap menu, contoh untuk beranda (home):

 <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 <b:else/>
  <li class='selected'><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 </b:if>

Sedangkan pada menu lain dapat disimak pada kode di bawah ini.

 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Tentang</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Tentang</a></li>
 </b:if>

Dimana URL (Uniform Resource Locator) pada kode yang berwarna merah adalah sama, contoh: h**p://namablog.blogspot.com/p/tentang.html. Selanjutnya dengan pengkodean CSS di atas, kita dapat pula membuat menu navigasinya menjadi lebih kompleks (drop down)

 <li><a href='#'>Drop Down</a>
  <ul class='submenu'>
   <li><a href='#'>Item1.1</a></li>
   <li><a href='#'>Item1.2</a></li>
   <li><a href='#'>Item1.3</a>
   <ul>
    <li><a href='#'>Item3.1</a></li>
    <li><a href='#'>Item3.2</a></li>
    <li><a href='#'>Item3.3</a></li>
   </ul>
   </li>
  </ul>
 </li>

Lho…, dimana tag kondisionalnya. Jika dalam menu berlaku drop down, maka tag kondisional tidak berlaku. Oleh karena masing-masing URL (warna biru) akan diisi dengan berbeda, sedangkan URL yang diberi warna merah tidak perlu dimasukkan — biarkan seperti itu — karena berfungsi sebagai alat bantu. Sekarang kamu pasti sudah bisa membuat menu horizontal sesuai keinginan dan kebutuhan di dalam blog kamu...