Nah pada kesempatan kali ini kang salman akan sedikit mengulas bagaimana cara membuat menu navigasi horizantal dorpdown versi III
Demo yang akan buat nanti seperti menu navigasi pada gambar berikut:
Bila terarik dapat membuatnya dengan mengikuti langkah-langkah di bwah ini :
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/AVvXsEj8Bu3MYiIMtiMBVUl2ZEBhm_K54VqXjzLFtZ0AbZuBhyTxaZjbost3_mGEOC7ZD1fQEuBTtjzSjnbz2b2yWVGFr_8RmDoIeksMQEcYNRMXHFCwSbxVHo5AShmn_38-TZh2uQ7mKtyNINoo/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;}
Berikutnya silakan cari kode </head>, lalu taruh kode di bwah ini tepat di atas </head>
<!-- Menu Horizontal -->Setelah selesai kita akan menambahkan dan memunculkan navigasinya. Caranya dengan menaruh kode ini di bawah <body>
<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]-->
<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 kamu dan nama menu di blog.
Nah sabahat kucoba, mudah bukan, kang salman yakin bisa lah, dan tutorial ini sudah kang salman uji coba 4 kali di blog berbeda dan sukses. so tidak akan ada masalah kecuali Anda sendiri yang melakukannya. pelan-pelan dan cermat :)
