Menu ini bekerja di semua browser utama seperti IE6, IE7, IE8, IE9, Firefox, Opera, Safari, Chrome Flock, SeaMonkey,bahkan bekerja baik di iPhone, iPad dan iPod Touch. Karena menu ini asli rekayasa CSS maka kodenya lebih mudah direkayasa sesuai dengan keinginan.
Jika ingin mengaplikasikan kedalam blog, maka berikut ini adalah langkah-langkahnya.
Langkah-Langkah Untuk Membuat Menu Drop List
>Pertama Login ke blogger lalu >> klik Elemen halaman >> Edit Html. Lalu Simpan dulu template anda.
Kemudian paste kode dibawah ini kedalam kelompok kode CSS di dalam template anda. Kode ini musti diletakkan sebelum /skin.
#menuHolder {margin-left:2px; width:750px; height:32px;}
ul.menu1 {padding:0; margin:0; list-style:none; position:relative;
margin-right:2px; float:left; font-family:verdana, sans-serif;
z-index:100; font-size:11px; height:32px;}
ul.menu1 li {float:left; height:32px;}
ul.menu1 li a {text-decoration:none; color:#fff; text-decoration:none;
font-size:11px; font-weight:bold;}
ul.menu1 li a.aTop {display:block; padding:0; line-height:30px;
height:30px; float:left;
transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
}
ul.menu1 li a.aTop span {display:block; padding:0 5px 0 15px;
background:url(http://4.bp.blogspot.com/-RiZSpbjVXDI/ )TdaNROCbp8I/AAAAAAAAA-I/ AXrojll0Wbg/s400/tab-left.png ;
float:left; cursor:pointer;}
ul.menu1 li a.aTop b {display:block; width:10px; height:30px;
padding:0; background:url(http://3.bp.blogspot.com/-BPvV3gTUOKs/ TdaNSWwNkCI/AAAAAAAAA-Y/ vj5aX34zZhU/s400/tab-right.png );
float:left;}
ul.menu1 li div.drop {position:absolute; left:-9999px; top:32px;
background:#fff
url(http://2.bp.blogspot.com/-ivs2R4iOhd0/TdaNRFJlCsI/ );AAAAAAAAA-Q/LsRpeXSAoUc/s400/ divider.gif
border:5px solid #800; opacity:0;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
ul.menu1 li div.col1 {width:150px;
-webkit-border-radius:0 8px 8px 8px;
-moz-border-radius:0 8px 8px 8px;
border-radius:0 8px 8px 8px;
}
ul.menu1 li div.col2 {width:300px;
-webkit-border-radius:0 8px 8px 8px;
-moz-border-radius:0 8px 8px 8px;
border-radius:0 8px 8px 8px;
}
ul.menu1 li div.col3 {width:450px;
-webkit-border-radius:0 8px 8px 8px;
-moz-border-radius:0 8px 8px 8px;
border-radius:0 8px 8px 8px;
}
ul.menu1 li div.drop dl {float:left; width:130px; padding:0 10px 10px
10px; margin:0;}
ul.menu1 li div.drop dl dt {font-weight:bold; padding:10px 0 3px 0;
color:#800; line-height:12px;}
ul.menu1 li div.drop dl dd {padding:0; margin:0;}
ul.menu1 li div.drop dl dd a {display:block; color:#c60;
font-weight:normal; line-height:12px; padding:3px 0;}
ul.menu1 li div.drop dl dd a:hover {color:#800; text-decoration:underline;}
ul.menu1 li div.bottomLine {clear:left; background:#800;}
ul.menu1 li div.bottomLine p {padding:0 10px; margin:0;
line-height:18px; color:#fc6; text-decoration:none;}
ul.menu1 li div.bottomLine p a:hover {text-decoration:underline;}
ul.menu1 li a.aTop:hover {color:#fc6;}
ul.menu1 li.sub:hover > a.aTop {border-bottom:2px solid #800; color:#fc6;}
ul.menu1 li.sub:hover > a.aTop span {color:#fc6;}
ul.menu1 li:hover div.drop {left:0; opacity:1;
transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
}
ul.menu1 li:hover div.left1 {left:-154px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
ul.menu1 li.close {position:absolute; right:0; top:0; opacity:0; z-index:-1;
transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
.clear {clear:both;}
/* for IE6 */
ul.menu1 table {border-collapse:collapse; width:0; margin:0 0 -1px 0;
position:absolute; left:0; top:0;}
ul.menu1 li.sub a.aTop:hover {border-bottom:2px solid #800; direction:ltr;}
ul.menu1 li.sub a.aTop:hover div.drop {left:0;}
ul.menu1 li.sub a.aTop:hover div.left1 {left:-154px;}
ul.menu1 li.sub a.aTop:hover div.bottomLine p {font-weight:normal;}
Lalu klik preview. Jika tidak ada pesan eror maka save template anda.
Kedua Letakkan kode di bawah ini di bawah header, bisa juga di atasnya. Tergantung anda. Caranya: Klik Elemen halaman lalu Add HTML/Javascript. Lalu paste semua kode di bawah ini:
<div id="soto">
<div id="menuHolder">
<ul class="menu1">
<li><a class="aTop" href="#nogo"><span>Home</span><b></b></a></li>
</ul>
<ul class="menu1">
<li class="sub"><a class="aTop"
href="#nogo"><span>Collections</span><b></b><!--[ if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="col3 drop">
<dl>
<dt>Dresses</dt>
<dd><a href="#url">Floral Print</a></dd>
<dd><a href="#url">Sleeveless</a></dd>
<dd><a href="#url">Pure Cotton</a></dd>
<dd><a href="#url">Linen Blend</a></dd>
<dd><a href="#url">Buttoned</a></dd>
<dt>Coats & Jackets</dt>
<dd><a href="#url">Silk Blend</a></dd>
<dd><a href="#url">Cotton Rich</a></dd>
<dd><a href="#url">Sleeveless</a></dd>
<dd><a href="#url">Pure Linen</a></dd>
</dl>
<dl>
<dt>Jeans</dt>
<dd><a href="#url">Flared denim</a></dd>
<dd><a href="#url">Bootleg</a></dd>
<dd><a href="#url">Cropped</a></dd>
<dt>Knitwear</dt>
<dd><a href="#url">Cardigans</a></dd>
<dd><a href="#url">Bolero</a></dd>
<dd><a href="#url">Plain long sleeve jumpers</a></dd>
<dt>Socks</dt>
<dd><a href="#url">Plain Cotton</a></dd>
<dd><a href="#url">Trainer</a></dd>
<dd><a href="#url">Sports</a></dd>
</dl>
<dl>
<dt>Shirts & Blouses</dt>
<dd><a href="#url">Pure Cotton</a></dd>
<dd><a href="#url">Pure Silk</a></dd>
<dd><a href="#url">Floral</a></dd>
<dt>Skirts</dt>
<dd><a href="#url">Pleated</a></dd>
<dd><a href="#url">Belted</a></dd>
<dd><a href="#url">Panelled</a></dd>
<dd><a href="#url">Pencil</a></dd>
<dd><a href="#url">Flared</a></dd>
</dl>
<br class="clear" />
<div class="bottomLine">
<p>Visit our <a href="#url">online store</a> for more bargains and
special offers . . .</p>
<p><a href="#url">Free delivery</a> on orders over £100.</p>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="close"><a href="#url"></a></li>
</ul>
<ul class="menu1">
<li class="sub"><a class="aTop" href="#nogo"><span>Mail
Order</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="col2 drop">
<dl>
<dt>Electronics</dt>
<dd><a href="#url">Televisions</a></dd>
<dd><a href="#url">DVD Players</a></dd>
<dd><a href="#url">Mobiles</a></dd>
<dd><a href="#url">Games Consoles</a></dd>
<dt>Wine</dt>
<dd><a href="#url">Red</a></dd>
<dd><a href="#url">White</a></dd>
<dd><a href="#url">Rose</a></dd>
<dd><a href="#url">Sparkling</a></dd>
</dl>
<dl>
<dt>Furniture</dt>
<dd><a href="#url">Garden furniture</a></dd>
<dd><a href="#url">Sofas</a></dd>
<dd><a href="#url">Dining chairs</a></dd>
<dd><a href="#url">Beds</a></dd>
</dl>
<br class="clear" />
<div class="bottomLine">
<p>Special offer on all <a href="#url">Microwaves</a> - 50% OFF!</p>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="close"><a href="#url"></a></li>
</ul>
<ul class="menu1">
<li class="sub"><a class="aTop" href="#nogo"><span>Special
Offers</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="col1 drop">
<dl>
<dt>Meanswear</dt>
<dd><a href="#url">Half price shirts</a></dd>
<dd><a href="#url">30% off Suits</a></dd>
<dd><a href="#url">Half price shoes</a></dd>
<dd><a href="#url">2 for 1 Shirts</a></dd>
<dt>Kidswear</dt>
<dd><a href="#url">Half price shirts</a></dd>
<dd><a href="#url">2 for 1 T shirts</a></dd>
<dd><a href="#url">1/3 off trainers</a></dd>
</dl>
<br class="clear" />
<div class="bottomLine">
<p>More <a href="#url">offers</a> online.</p>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="close"><a href="#url"></a></li>
</ul>
<ul class="menu1">
<li class="sub"><a class="aTop"
href="#nogo"><span>Accessories</span><b></b><!--[ if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="col3 drop left1">
<dl>
<dt>Scarves</dt>
<dd><a href="#url">Silk</a></dd>
<dd><a href="#url">Chiffon</a></dd>
<dd><a href="#url">Crinkle</a></dd>
<dd><a href="#url">Butterfly</a></dd>
<dd><a href="#url">Tassel</a></dd>
<dt>Belts</dt>
<dd><a href="#url">Leather</a></dd>
<dd><a href="#url">Elasticated</a></dd>
<dd><a href="#url">Reversible</a></dd>
</dl>
<dl>
<dt>Necklaces</dt>
<dd><a href="#url">Pendant</a></dd>
<dd><a href="#url">Pearl</a></dd>
<dd><a href="#url">Drop</a></dd>
<dt>Earrings</dt>
<dd><a href="#url">Party</a></dd>
<dd><a href="#url">Silver</a></dd>
<dd><a href="#url">Gold</a></dd>
<dd><a href="#url">Stud</a></dd>
<dt>Rings</dt>
<dd><a href="#url">Diamond</a></dd>
<dd><a href="#url">Pearl</a></dd>
<dd><a href="#url">Emerald</a></dd>
</dl>
<dl>
<dt>Handbags</dt>
<dd><a href="#url">Shopper</a></dd>
<dd><a href="#url">Tote</a></dd>
<dd><a href="#url">Shoulder</a></dd>
<dd><a href="#url">Beach</a></dd>
<dd><a href="#url">Leather</a></dd>
<dd><a href="#url">Clutch</a></dd>
<dd><a href="#url">Mock Crocodile</a></dd>
</dl>
<br class="clear" />
<div class="bottomLine">
<p>Why not treat yourself to a <a href="#url">makeover</a> in our
cosmetic department.</p>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="close"><a href="#url"></a></li>
</ul>
<ul class="menu1">
<li><a class="aTop" href="#nogo"><span>Contact Us</span><b></b></a></li>
</ul>
</div>
<img src="http://4.bp.blogspot.com/-SeMX3FOoXjU/TdaLpVm-vrI/ "AAAAAAAAA94/rIn5cZ7evGs/s400/ back.jpg
alt="" />
</div> <!-- end of info -->
<style type="text/css">
Save html anda dan lihat hasilnya. Kini tugas anda hanyalah mengganti gambar background, mengganti link dengan milik anda sendiri dan semua kalimat yang tidak sesuai dengan web anda sendiri. Tidak sulit bukan?
Selamat mencoba...
Post title : Cara Membuat Menu Drop List Dengan Kode CSS
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-drop-list-dengan-kode.html
URL post : https://adanggak.blogspot.com/2011/05/cara-membuat-menu-drop-list-dengan-kode.html
0 komentar:
Show Emoticons
Posting Komentar