Breaking News
Loading...

Membuat Menu Drop Down

Ada kawan yang bertanya mengenai bagaimana membuat baris menu yang bertingkat atau dinamakan Drop Down menu. Menu ini digunakan biasanya untuk mengindeks link-link yang banyak dan bervariasi, sehingga tidak memakan banyak tempat pada header. Selain itu juga dapat berfungsi untuk pengaplikasian menu yang efektif. Berikut ulasan singkat mengenai pengaplikasian drop down menu yang sederhana. Tancap Gas Sul... Hehehhe

Pertama buka menu "Template" pada pengaturan blogger. Selanjutnya masuk kepengaturan edit html.
cari kode:  ]]></b:skin> kemudian copy html dibawah ini dan paste.:

#menuwrapperpic{background:url(http://2.bp.blogspot.com/-JPJ3cttk3UY/UgeTkhCCRsI/AAAAAAAABXw/vqWVpbMg5-g/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(http://4.bp.blogspot.com/-Poe1DlFFJDI/T35TYW15bFI/AAAAAAAAF6M/XklwYDShSVM/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(http://4.bp.blogspot.com/-EkPPCTlSFrE/TeCqa9ww_AI/AAAAAAAAAwU/H3xUv6nyoPw/s1600/nav.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(http://2.bp.blogspot.com/-JPJ3cttk3UY/UgeTkhCCRsI/AAAAAAAABXw/vqWVpbMg5-g/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}





Lanjut cari kode berikut <!-- /content-wrapper-->  kalau tidak ketemu cari ini <div id='content-wrapper'> . Kemudian copy paste kan pas dibawah dari kode merah diatas.

 <div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-hOrRvLeBQYM/T_WSzbGC7vI/AAAAAAAAHPw/S_2CUG0zZhk/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='http://www.jijihans.com/p/about-me_9122.html'>Jijihans.com</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Jijihans</a></li>
<li><a href='#'>Alam</a></li>
<li><a href='#'>Mati</a>
<ul>
<li><a href='#'>Pertanian</a></li>
<li class='hr'/>
<li><a href='#'>Agriculture</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Perikanan</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>



Mudah bukan? . Nanti tampilan dari menu dropdown ini seperti ganbar yang diatas.
Note: untuk #, ganti dengan link sendiri seperti link pada jijihans.com sesuai dengan gambar diatas.
Baik, semoga bermanfaat untuk teman saya. ataupun pembaca sekalian.
Terima kasih.


 
Toggle Footer