Horizontal List

Seperti bentuk list yang lain, horizontal list hanya berbeda karena list tersusun dalam deret horizontal, dimana dalam satu deret/baris bisa terdiri dari beberapa buah list. Anda bisa memanfaatkannya untuk memasang link, baik berupa lin menu ataupun link yang lain. Untuk menambah link, anda perlu membuat list baru mengikuti list yang sudah ada. Tambahkan tag "a" serta beberapa variable kelengkapannya agar lebih maksimal dalam penggunaan.

Kode CSS :

#GRhorzlist{
      margin:0;
      margin-left:0px;
      padding:0;
      list-style-type:none;
      float:left;
}
#GRhorzlist li{
      display:inline-block;
      font-size:11px;
      font-family:Verdana;
      font-weight:bold;
      list-style-type:none;
      height:30px;
      line-height:30px;
      background:#555;
      padding:0 6px;
}
#GRhorzlist li:hover{
      background:#777;
}
#GRhorzlist li a{
      color:#eee;
      text-decoration:none;
      text-shadow:1px 1px 1px #000;
}
#GRhorzlist li a:visited{
      color:#999;
}
#GRhorzlist li:hover a{
      color:#f00;
}

xHTML :

<ul id="GRhorzlist">
      <li><a href="URL-List_Item-1" id="current">Item-1</a></li>
      <li><a href="URL-List_Item-2">Item-2</a></li>
      <li><a href="URL-List_Item-3">Item-3</a></li>
      <li><a href="URL-List_Item-4">Item-4</a></li>
      <li><a href="URL-List_Item-5">Item-5</a></li>
      <li><a href="URL-List_Item-6">Item-6</a></li>
</ul>
<div style="clear:both;"></div>

Catatan/Keterangan :

1. Untuk menyimpan kode, silahkan buka Special Tutorials pada menu sebelah kiri.
2. Untuk menambah list baru, buat kode baru seperti berikut :
   <li><a href="URL-List_Item-7">Item-7</a></li>
3. Jika diperlukan tambahkan beberapa variable pelengkap link seperti:
   <li><a href="URL-List_Item-7" target="_blank" title="Link Title">Item-7</a></li>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update »Ngahad PON, Maret, 25, 2012

» Happy Blogging - gubhugreyot «