http://sukaweb.blogspot.com: Membuat Menu Horizontal dengan drop menu horizontal

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;}

Langkah kedua

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

<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>

<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><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>

<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.

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

Semoga bermanfaat....!!

Sumber : http://kibagus-homedesign.blogspot.com/2010/02/membuat-menu-horizontal-dengan-drop.html#ixzz1v35AyFQi

http://sukaweb.blogspot.com

Membuat Menu Horizontal dengan drop menu horizontal

Tidak ada komentar:

Posting Komentar

hosting gratis