Cara Membuat Menu Drop Line Horizontal

Menu drop line horizontal adalah variasi dari menu drop. Bedanya, menu yang satu ini menampilkan isi item secara horizontal. Jika Menu drop vertikal selalu menampilkan sub item sejajar rapi vertikal bersama dengan judul menu, maka menu drop line horizontal membuat list item berjejer datar horizontal persis di bawah menu utama.



Menu drop line horizontal pertama kali saya temukan di website tabloidnova.com, sejak itu saya tertarik untuk mengaplikasikannya ke blog saya. Tentu saja cara membuat menu seperti itu tidak saya peroleh tutorialnya dari tabloidnova.com, karena web yang satu itu lebih banyak berkutat pada menu makanan dan selebriti.









Menu drop line horizontal bisa dibuat dengan javascript, namun dalam hal ini lebih mudah dengan menggunakan CSS.



Caranya adalah:



Pertama:


Masukkan kode berikut ini ke dalam CSS blog anda. Login ke blogger >> Layout >> Edit HTML. Lalu cari kode ]]></b:skin>. Tapi sebelumnya jangan lupa save dulu template anda.



Kedua:

Masukkan kode berikut ini tepat di atasnya.




.dropMenu {margin-bottom:0px;}
.dropMenu {width:900px; position:relative; text-align:center; font-family:arial, sans-serif; font-size:13px; height:70px; background:#882 url() repeat top left;}
.dropMenu div {width:900px; position:absolute; left:-9999px; text-align:center; height:35px; padding:12px 0; z-index:100; background:url(); opacity:0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
-o-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
.dropMenu ul {padding:0; margin:0; list-style:none;}
.dropMenu ul li {display:inline-block; background:url() no-repeat right center; line-height:35px;}
.dropMenu ul li.last {background:none;}
.dropMenu ul li a {display:inline-block; line-height:35px; text-decoration:none; color:#fff; padding:0 15px; font-weight:bold;}
.dropMenu ul li a:visited {color:#fff;}

.dropMenu ul li a:hover {white-space:nowrap; color:#ff0;}
.dropMenu ul li:hover > a {color:#ff0;}
.dropMenu ul li a:hover b {display:inline-block; position:relative; left:-40px; padding-left:40px; padding-right:40px; margin-right:-80px; background:url(trans.gif); cursor:pointer;}
.dropMenu ul :hover div {left:0; top:23px; opacity:1;}

<!--[if lte IE 7]>
<style type="text/css">
.dropMenu ul li {display:inline;}
.dropMenu table {border-collapse:collapse; width:0; height:0; margin-bottom:-1px;}
</style>








Kemudian Save template anda.



Ketiga:



Klik Element Halaman >> Add Widget HTML/Javascript, pilih tempat yang sesuai menurut anda, lalu kopy paste kode berikut ini:




<div id="info">

<div class="dropMenu">

<ul>

<li><a href="#url"><b>HOME</b><!--[if lte IE 6]>
<table><tr><td></td></tr></table><![endif]-->
</a></li><li>
<a href="#url"><b>Handphone</b>
<!--[if gte IE 7]><!-->
</a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->


<div>

<ul>

<li><a href="#url">Cameras</a></li><li><a href="#url">Nokia</a>
</li><li><a href="#url">Samsung</a></li><li><a href="#url">Blackberry</a></li>

</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->


</li>

<li><a href="#url"><b>Komputer</b><!--[if gte IE 7]>
</a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<ul>

<li><a href="#url">Motherboard</a></li>
<li><a href="#url">Monitor</a></li><li><a href="#url">Hardisk</a></li>


</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#url"><b>CONTACT US</b><!--[if gte IE 7]>
<!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<ul>

<li><a href="#url">Email</a></li><li><a href="#url">Post</a></li>
<li><a href="#url">Fax</a></li><li><a href="#url">Telephone</a></li><li class="last">
<a href="#url">SMS</a></li>


</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

</div><![endif]-->




Lalu Save Html. Lihat hasilnya.



Tentu saja menu di atas masih mentah, tetapi untuk menyesuaikan dengan blog anda, hanya perlu mengganti background, width dan link. Saya fikir tidak terlalu sulit menyesuaikannya.

Bazonggier

Bazonggier is a site where you find unique and professional blogger templates, Improve your blog now for free. Kapan Nikah?

Posting Komentar

Lebih baru Lebih lama