Membuat Menu Horizontal dengan drop menu horizontal

Membuat menu horizontal memang sangat menarik karena menu merupakan bagian dari kelengkapan website yang merupakan ringkasan atau bisa dikatakan mewakili isi dari website tersebut.

sample - 1

Sample - 2

Kali ini menu yang akan kita buat prinsipnya sama dengan menu horizontal yang lain tapi dengan variasi background dan drop menu akan menambah daya tarik yang tersendiri.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

.pro_linedrop {

height:35px;

width:1000px;

background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0.gif);
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:500;
}

.pro_linedrop .select {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1.gif);
}

.pro_linedrop li.lrt {
float:right;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1.gif);
}

.pro_linedrop .select a {
display:block;
height:35px;
float:left;
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:33px;
white-space:nowrap;
color:#fc0;
}

.pro_linedrop .select li.lrt a {color:#0ff;}

.pro_linedrop .select a b {
display:block;
padding:0 30px 0 15px;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0.gif) right top;
}

.pro_linedrop .select li.line a b {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_0a.gif) right top;
}

.pro_linedrop .select a:hover,
.pro_linedrop .select li:hover a {
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#fff;
}

.pro_linedrop .select li.lrt a:hover,
.pro_linedrop .select li.lrt:hover a {
background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1.gif);
}

.pro_linedrop .select a:hover b,
.pro_linedrop .select li:hover a b {
display:block;
padding:0 30px 0 15px;
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1.gif) right top;
cursor:pointer;
}

.pro_linedrop .select li.line a:hover b,
.pro_linedrop .select li.line:hover a b {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/black_1a.gif) right top;
}

.pro_linedrop .select li.lrt a:hover b,
.pro_linedrop .select li.lrt:hover a b {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1.gif) right top;
}

.pro_linedrop .select li.lrt a:hover b.arrow,
.pro_linedrop .select li.lrt:hover a b.arrow {
background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/blue_1a.gif) right top;
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_linedrop .sub {
margin:0;
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:25px;
display:block;
position:absolute;
float:left;
width:900px;
top:35px;
left:0;
text-align:center;
background:#fff url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/fade.gif);
border:1px solid #aaa;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a
{display:block; height:25px; line-height:22px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#333;font-size:10px;}

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative; background:#fff url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/fade.gif) left bottom;}

Keterangan :

Warna Merah, Tinggi dan Lebar menu, sesuaikan dengan blog yang ada.
Warna kuning, URL untuk image background menu. ( bila kamu ingin menyesuaikan dengan warna blog kamu silakan diganti dengan punya kamu sendiri )

Langkah kedua

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<div class="pro_linedrop">
<ul class="select">
<li><a href="#"><b>Home</b></a></li>

<li class="line"><a href="#"><b>Menu</b></a>

<ul class="sub">
<li><a href="#" target="_blank">Blogger Trick</a></li>
<li><a href="#" target="_blank">Template</a></li>
<li><a href="#" target="_blank">Konsep Design</a></li>
<li><a href="#" target="_blank">Construction</a></li>
<li><a href="#" target="_blank">Green House</a></li>
</ul>

</li>
<li class="line"><a href="#" target="_blank"><b>Services</b></a>

<ul class="sub">
<li><a href="#" target="_blank">Perencanaan</a></li>
<li><a href="#" target="_blank">Konsultasi</a></li>
<li><a href="#" target="_blank">Gallery</a></li>
<li><a href="#" target="_blank">pasang Iklan</a></li>
</ul>

</li>
<li class="lrt"><a href="#" target="_blank"><b>Daftar Isi</b></a></li>

<li class="line lrt"><a href="#" target="_blank"><b class="arrow">Shop</b></a>

<ul class="sub rt">

<li><a href="#" target="_blank">Online</a></li>
<li><a href="#" target="_blank">Shopping center</a></li>
<li><a href="#" target="_blank">Mail Order</a></li>
</ul>

</li>
<li class="line lrt"><a href="#" target="_blank"><b class="arrow">Contacts</b></a>

<ul class="sub rt">

<li><a href="#" target="_blank">Facebook</a></li>
<li><a href="#" target="_blank">Twitter</a></li>
<li><a href="#" target="_blank">Guest Book</a></li>
<li><a href="#" target="_blank">Chatting</a></li>
<li><a href="#" target="_blank">Profil</a></li>
</ul>


</li>
</ul>
</div>

Simpan dan lihat hasilnya.

Keterangan :

Warna Merah, Nama nama menu sesuai dengan kebutuhan
Warna Hijau, Alamat URL yang akan kamu tuju sesuai dengan nama menu

________________________________________________________
Untuk beberapa jenis template, silakan kamu pasang kode diatas dibawah kode </head> atau dibawah <body> ________________________________________________________
Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play