Memenuhi janji saya atas permintaan seorang teman, berikut ini saya coba sajikan cara membuat menu navigasi horizontal dengan tampilan drop down menu.
Langkah-langkahnya sebagai berikut :
1.Login Blogger >> Rancangan >> Edit HTML >> Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>
/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHm2SU97-VbG56C6d2ar_gLK5wITf10i0RveiwkEinKcysiwljzPSLfj0qQQ3nyrq-GBeFYNb4O0sgnAWi4BZv02llxrNjsc0npXHcE6VDlVbscK5GmIP2KIGerJD54DpQcI04Jqr_EV0b/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}
2. Berikutnya silakan cari kode , lalu taruh kode di bwah ini tepat di atas </head>
<!--Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[ function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com if(navigator.appVersion.indexOf("MSIE")==-1){return;} var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar'; for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){ lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){ lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs; this.className=cl;};lg[k].onmouseout=function(){c=this.className; this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}} //]]> </script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;}
</style> <![endif]-->
3. Setelah selesai kita akan menambahkan dan memunculkan navigasinya. Caranya dengan menaruh kode ini di bawah <body>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'> <li class='selected'>
<a href='/'>Home</a></li>
<li><a href='#'>Peristiwa</a></li>
<li'><a href='#'>Hiburan</a></li>
<li><a href='#'>Sport</a> <ul>
<li><a href='#'>Bola</a></li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>F1</a></li>
</ul>
</li>
<li><a href='#'>Politik</a></li>
<li><a href='#'>Hukum</a></li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Tekno</a></li>
<li><a href='#'>Tutorial</a> <ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</li>
<li><a href='#'>Lowongan Kerja</a></li>
<li><a href='#'>Pendidikan</a></li>
<li><a href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>
Catatan: Silakan ganti "#" link-link di atas dengan link artikel milik anda dan nama menu di blog.
5 komentar:
sangat bermanfaat sekali dan kebetulan saya sdh memasang, nice sharing and happy blogging
wiih keren navigasinya, boleh nih dicoba mudah2an pas dihati :D
Akhirnya punya saya bisa dikasih menu dropdown juga, terima kasih kawan. Oiya, ada sedikit kesalahan dihtml-nya, di bagian "li" keselip simbol "'" sama kurang ">".
Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.
Nice tutorial sob..kapan-kapan bakal saya terapkan nih di blog saya.
Nice blog & Thanks :)
Posting Komentar