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-nya adalah sebagai berikut :

#menu-horizontal {
width:850px;
height:30px;
background:#FFFFFF url(http://i647.photobucket.com/albums/uu191/ariamsi/Icon/headfoot.gif) repeat-x; }

#menu-nav {
width: 500px;
float: left; }

ul.menu-nav {
height:30px;
line-height:30px;
list-style:none;
margin:0;
padding:0;}

ul.menu-nav li {
float:left;
list-style-type:none;
margin:0;}

ul.menu-nav li a {
float:left;
font:11px Verdana, Geneva, sans-serif;
color:#FFFFFF;
font-weight:bold;
text-transform:uppercase;
padding: 0 20px;
line-height:30px;
border-right:1px solid #FFFFFF;
text-decoration:none; }

ul.menu-nav li a:hover {
text-decoration:none;}

ul.menu-nav li a:visited {
color:#FFFFFF;
font-weight:bold;}

#search {
width: 240px;
font-size: 11px;
float: right;
margin: 0;
padding: 3px 5px 0 0; }

#search a img {
border: none;
margin: 0;
padding: 3px 5px 0 0; }

Catatan :

• #menu-horizontal merupakan area menu horizontal.

1. width:850px; adalah lebar menu horizontal.
2. height:30px; adalah tinggi menu horizontal.
3. background:#FFFFFF url(http://i647.photobucket.com/albums/uu191/ariamsi/Icon/headfoot.gif) repeat-x; adalah latar menu horizontal, baik warna atau menggunakan image. Apabila url-nya diisi dengan alamat penyimpanan image kamu, maka secara otomatis background akan menggunakan image kamu tersebut. Sedangkan repeat-x berguna untuk melakukan pengulangan image secara horizontal dari kiri ke kanan sejauh (width:850px;). Sebaliknya repeat-y berguna untuk melakukan pengulangan image secara vertikal dari atas ke bawah sejauh (height:30px;).

• #menu-nav merupakan area khusus untuk peletakkan item-item, seperti : home, tips seo, dan seterusnya.

1. width: 500px; adalah lebar menu-nav.
2. float: left; adalah penempatan menu horizontal di mulai dari kiri.

• ul.menu-nav merupakan area penomoran item akan dimulai.

1. height:30px; adalah tinggi area penomoran item.
2. line-height:30px; adalah jarak antar baris paragraf.
3. list-style:none; adalah Penomoran (1,2,3,... atau bullent) dihilangkan
4. margin: 0; adalah jarak start area penomoran dengan area menu horizontal.
5. padding:0; adalah jarak antara start area penomoran dengan elemen didalamnya (li).

• ul.menu-nav li merupakan area penomoran item.

1. float: left; adalah posisi item di kiri.
2. margin:0; adalah jarak antara area penomoran item dengan area penomoran item akan dimulai.
3. list-style:none; sama dengan di atas.

• ul.menu-nav li a adalah area penomoran atau item yang diberi link.

1. float: left; sama dengan di atas.
2. font:11px Verdana, Geneva, sans-serif; adalah ukuran huruf dan jenis huruf (jika browser tidak mendukung jenis huruf verdana, maka akan dicoba meloading huruf geneva. Begitu seterusnya sampai font terakhir).
3. color:#FFFFFF; adalah warna font.
4. font-weight:bold; adalah penekanan terhadap huruf.
5. text-transform:uppercase; adalah bentuk huruf besar semua, walau kamu tulis huruf kecil.
6. padding: 0 20px; adalah jarak antara area penomoran dengan item (atas dan bawah= 0; kiri dan kanan=20px).
7. line-height:30px; sama dengan di atas.
8. border-right:1px solid #FFFFFF; adalah garis tepi sebelah kanan berukuran 1px menyatu dan berwarna putih.
9. text-decoration:none; adalah agar membentuk teks yang memiliki link (item) tidak bergaris bawah.
10. Tambahkan width: ... px; (isi titiknya dengan nilai yang kamu inginkan), agar item mempunyai lebar yang sama.

• ul.menu-nav li a:hover merupakan kode penomoran atau item jika didekati mouse.

1. text-decoration:none; sama dengan di atas.
2. Tambahkan background:#...; (isi titik-titik dengan kode warna) dan diiringi dengan kode display:block; agar tampilan item saat kursor mouse didekatkan menjadi berbeda.

• ul.menu-nav li a:visited merupakan kode penomoran item jika telah dikunjungi (diklik).

1. color:#FFFFFF; adalah warna font (teks item).
2. font-weight:bold; sama dengan di atas.

• Sedangkan #search dapat kamu baca postingan "Membuat Search dalam Blog"

Kode HTML dari CSS di atas adalah :

<div id="menu-horizontal">
<div id="menu-nav">
<ul class='menu-nav'>
<li><a href='http://#'>item Home</a></li>
<li><a href='http://#'>item 1</a></li>
<li><a href='http://#'>item 2</a></li>
<li><a href='http://#'>item 3</a></li>
<li><a href='http://#'>item 4</a></li>
</ul>
</div> <!-- end #menu-nav -->

<div id='search'>
<form action='http://optimasi-blog.blogspot.com/search' id='searchform' method='get' name='searchform'><input id='s' name='q' onblur='if (this.value == "") {this.value = "search...";}' onfocus='if (this.value == "search...") {this.value = ""}' type='text' value='search...'/> <input id='searchsubmit' type='submit' value='Search'/> </form>
</div> <!-- end #search -->

</div> <!-- end #horizontal-navigasi -->

Catatan : Jangan lupa ganti kode yang berwarna merah, dengan alamat blog kamu.

Sekarang kamu pasti sudah bisa membuat menu horizontal sesuai keinginan dan kebutuhan di dalam blog kamu...