Tapi tahukah anda bahwa untuk membuat menu drop horizontal yang bagus tidak harus menggunakan kode javascript? Menu dengan tampilan profesional dengan satu baris menu utama dan satu baris yang lain menjadi sub menu yang sejajar horizontal bisa dibuat dengan kode html dan CSS. Seperti contoh berikut ini:
Menu Drop Horizontal dengan kode CSS HTML
Saya sebetulnya sangat tertarik pada menu yang satu ini tapi karena tidak banyak variasi isi blog yang harus ditampilkan, cukuplah menu yang sudah ada. Nanti jika isi blog sudah cukup bervariasi, pasti akan saya gunakan. Jangan ragu menggunakan menu ini karena bisa tampil baik di semua browser. Jika ingin mencobanya di broser lain, silahkan buka Opera, Modzilla, IE Google Chroome dst dan lain-lain. Tidak hanya itu, menu ini sangat ringan karena menggunakan CSS tanpa bantuan kode javascript.
Jika ingin menggunakan menu yang satu ini ke dalam blog anda cukup dengan melakukan langkah-langkah berikut ini:
Langkah Pertama
Login ke blog anda, lalu klik >> Elemen Halaman >> Edit HTML. Sebelumnya save dulu template anda untuk menghindari kesalahan pengeditan.
Langkah Kedua:
Masukkan kode di bawah ini kedalalm kumpulan CSS template dimana saja posisinya, yang jelas sebelum ]]></b:skin>.. Anda bisa mencari tag tersebut lebih cepat dengan menekan F3 atau menekan bersamaan Ctrl + F. Jika sudah ketemu dan tahu tempatnya lalu Kopi paste kode berikut ini:
<style type="text/css">
#monika {height:400px;}
.agnes {
position:relative;
width:530px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaX0mN6NbvLANBZriegiToMdxVpHyBqrys_RJ82lMPvaahb8eurHz7iJC79iICRG0RXZplXHUGtiroFe_MbY43V6-I9DlSj5Y-xG1FgbejgqAbupzczQS8EFBwJnTpM5Nx-LA3avmQQRg/s400/line.gif) bottom left repeat-x;
margin-bottom:5em;
margin-top:50px;
}
* html .agnes {padding-bottom:0;}
.agnes ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:530px;
height:100%;
}
.agnes li{
float:left;
}
.agnes table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}
.agnes a, .agnes :visited {
color:#fff;
text-decoration:none;
}
.agnes a em.lft, .agnes :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghy9xdTcJnMs6EP4udtoOIf85Nwoao1jMnjbcZ9Bf_fZnTPsIj86WjqEb5L3jfnXjs5xr8E4zHyC3zPYZ_E19AennnhUJyNDJvg1HahW5Jrmsm5QrORTaS1uNHWhyphenhyphen01vhCRQ_U6qA5OV0/s400/lefta.gif);
border-bottom:1px solid #777;
}
.agnes a b, .agnes :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVNwgTB7yQpdyReQokhpX-fOc88J_VUhuRG6BJs6cNxGs-vqQjPlobBfj86Rr9Z_FwB96F_z-R2dFjQHrO608ZNRjBVOw3WgX9nJUiZUK5n2fyuraOJQ7eIcwFeuAXQJT-yrGEH_IuHuQ/s400/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.agnes a em.rgt, .agnes :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguk6gNBp5qRY2dbpk810xnwvXwrt26-9qXImIkWEN0z5pPW-a5ZFtcNyZE-ZFl0oFAW2AXwZD1jJcm9Em2g3lNRGHmD6uV952avKseBAa_dkWeBSPCMedwu16sdz6Z5PawaUFJZCEKu-M/s400/righta.gif);
border-bottom:1px solid #777;
}
.agnes ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:530px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}
.agnes :hover {
white-space:normal;
}
.agnes a:hover b {
color:#000;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zIw085CO8SOXZk1nHHDelgkhXKKaAhPV6dT02fd0SZD6wypjBA-k_h1O7QRi3sAD66XBPd97ndPqxhqBTmev0WPTHU89duopgJN8XMntkbzAeVeLK4-s_kSfjt93DdxtW9NlVT66G68/s400/midb.gif);
border-bottom-color:#ccc;
}
.agnes a:hover em.lft {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGptvLPBHYnPA9TmYNqweOrav9Xa-H3hFfxiB1CV-1S77agsUp5o1ASdJYf3kC0Bda7zZ_hsv-yyyQDt_A7zlJY6pi3Qa-wvFxuECk5wmpdqwYMvgXAF5upgUW7dlZN09hSDmFmszPzg/s400/leftb.gif);
border-bottom-color:#ccc;
}
.agnes a:hover em.rgt {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFLqS0P8JTaEavukPUr4DwWuzRkbEUyqt3qzMsfcxVcbK7awOKSAl-_POhKZ5iGk0msj5Mgii9qrMvweQVeiWLxnnFAhyphenhyphenDgc3veJvZ0TZr8T42B9wdoOsiKATScKOTxxEPjDNsqsHp2g/s400/rightb.gif);
border-bottom-color:#ccc;
}
.agnes li:hover > a b
{
color:#000;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zIw085CO8SOXZk1nHHDelgkhXKKaAhPV6dT02fd0SZD6wypjBA-k_h1O7QRi3sAD66XBPd97ndPqxhqBTmev0WPTHU89duopgJN8XMntkbzAeVeLK4-s_kSfjt93DdxtW9NlVT66G68/s400/midb.gif);
border-bottom-color:#ccc;
}
.agnes li:hover > a em.lft {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGptvLPBHYnPA9TmYNqweOrav9Xa-H3hFfxiB1CV-1S77agsUp5o1ASdJYf3kC0Bda7zZ_hsv-yyyQDt_A7zlJY6pi3Qa-wvFxuECk5wmpdqwYMvgXAF5upgUW7dlZN09hSDmFmszPzg/s400/leftb.gif);
border-bottom-color:#ccc;
}
.agnes li:hover > a em.rgt {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFLqS0P8JTaEavukPUr4DwWuzRkbEUyqt3qzMsfcxVcbK7awOKSAl-_POhKZ5iGk0msj5Mgii9qrMvweQVeiWLxnnFAhyphenhyphenDgc3veJvZ0TZr8T42B9wdoOsiKATScKOTxxEPjDNsqsHp2g/s400/rightb.gif);
border-bottom-color:#ccc;
}
.agnes ul li:hover ul,
.agnes ul a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}
.agnes ul :hover ul li {
display:block;
border-left:1px solid #777;
background:#ccc;
height:2em;
}
.agnes ul :hover ul li a {
display:block;
font-size:0.8em;
height:2em;
line-height:2.5em;
width:auto;
float:left;
color:#444;
padding:0 10px;}
.agnes ul :hover ul li a:hover {
color:#c00;
}
</style>
Klik Preview template anda, dan jika tidak ada pesan eror! Save template anda.
Langkah Ketiga:
Klik Elemen Halaman >> Add Gadget HTML/Javascript. Kemudian tambahkan kode html di bahwah ini de posisi mana yang ingin anda gunakan. Tapi karena ini adalah menu navbar, seharusnya ditempatkan di atas header atau persis di bawah header. Sebaiknya tempatkanlah persis di bawah header.
Kopi paste kode di bawah ini kedalam widget html tadi:
<div class="agnes">
<ul>
<li><a href="#" title="Black Hollow"><em class="lft"></em><b>Black Hollow</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><td><![endif]-->
<ul>
<li><a href="#">Teory Evolusi</a></li>
<li><a href="#">Asal Usul Adam</a></li>
<li><a href="#">Kita Bukan Alien</a></li>
<li><a href="#">Adam Dari Tanah</a></li>
<li><a href="#">Adam Bukan Alien</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Planet Kungfu"><em class="lft"></em><b>Planet Kungfu</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Rantai Makanan</a></li>
<li><a href="#">Ras Manusia</a></li>
<li><a href="#">Baik Itu Kelemahan?</a></li>
<li><a href="#">Dinosaurus Modern</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="Bussiness"><em class="lft"></em><b>Bussiness</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><span style="font-weight:bold;"></span><td><![endif]-->
<ul>
<li><a href="#">Modern Home Industri</a></li>
<li><a href="#">Raim Mimpi Langkah Seribu</a></li>
<li><a href="#">Dont Stop Dreaming</a></li>
<li><a href="#">Sabun Cair Anti Lemak</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#"><em class="lft"></em><b>Fresh Lime</b<em
class="rgt"></em></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">The Large Bathers</a></li>
<li><a href="#" title="">Standing Up Pouch</a></li>
<li><a href="#">Sabun Cair Curah</a></li>
<li><a href="#">Bahan Kimia Sabun</a></li>
<li><a href="#">Harga Teksapon</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
Lalu save Html anda lalu lihat hasilnya. Tentu saja tampilannya belum sesuai dengan yang dikehendaki, karena ukurannya masih 500 px, warna dan linknya belum sesuai seperti yang dikehendaki. Karena itu beberapa hal perlu dibenahi. Saya yakin finishing touch tidak sulit buat anda.
Itu saja selamat mencoba..
Catatan:
Jangan merubah tata letak div, li dan kode lain yang tidak perlu, karena bisa merubah tampilan di broser yang lain. Cukup merubah ukuran, warna, link dan background.
Post title : Cara Membuat Menu Drop Horizontal Dengan CSS
URL post : https://adanggak.blogspot.com/2011/04/cara-membuat-menu-drop-horizontal.html
URL post : https://adanggak.blogspot.com/2011/04/cara-membuat-menu-drop-horizontal.html
0 komentar:
Show Emoticons
Posting Komentar