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
  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. 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><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="line"><a href="#" target="_blank"><b>Services</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</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><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="line lrt"><a href="#" target="_blank"><b class="arrow">Contacts</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<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>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</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
Labels: ,