255 Votes

Horizontal Sliding Menu merupakan sebuah menu horizontal yang terbangun dari penggabungan kinerja CSS dan javascript dengan muatan KODE untuk sebuah menu bisa dikatakan sangat kecil sehingga menu yang sangat menarik ini ditanggung tidak akan membebani loading blog. Penekanan akan loading blog menjadi sangat perlu karena akan menjadi sangat fatal pengaruhnya apabila blog menggunakan terlalu banyak KODE dengan muatan 'nggedabyah', maka semakin lama dengan intensifnya posting ditanggung beban yang harus ditanggung saat loading menjadi semakin bertambah besar yang menjadikan loading menjadi sangat lambat. Loading yang sangat lambat tentunya akan sangat berpengaruh terhadap intensitas pembaca blog untuk mampir menikmati sajian yang dengan susah payah sudah kita postingkan. Anda tinggal menyimpan KODE CSS dan javascript di bagian head dan merubah KODE HTML untuk menu sesuai kebutuhan posting blog kemudian menyimpannya di bagian body atau bisa dilakukan dengan menyimpannya di Edit HTML -> Elemen Laman ->Tambah Gadget ->HTML/Javascript. Mungkin anda tertarik untuk melihatnya terlebih dahulu sebelum menggunakan Horizontal Sliding Menu ini ? Silahkan KLIK DEMO untuk melihatnya!

Letakan Kode CSS/Javascript diantara <head> dan </head>

KODE CSS

<style type="text/css"> 
* {
       margin:0; 
       padding:0;
       }
.menu {
       position:relative; 
       background:url(http://i50.tinypic.com/fwovf6.gif); 
       height:32px; 
       width:995px;
       }
.menu ul {
       list-style:none; 
       z-index:10; 
       position:absolute; 
       z-index:100; 
       padding:9px 5px;
       border-bottom:2px solid #fff;
       border-top:2px solid #fff;
       border-left:2px solid #fff;
       border-right:2px solid #fff; 
       }
.menu li {
       float:left;
       font-size:10px;
       font-family: verdana;
       font-weight: bold;
       text-decoration:none;
       }
.menu a, .menu a:active, .menu a:visited {
       text-decoration:none; 
       color:#CCFF00; 
       padding:8px;
       }
.menu a:hover {
       color: #FF0000;
       } 
#slide {
       position:absolute; 
       top:4px; 
       height:28px; 
       background: #0000FF; 
       z-index:10;
       }
</style>

 Javascript

<script type="text/javascript">
/* boggerstuars.blogspot.com - gubhugreyot.blogspot.com */
var menuSlider=function(){
var m,e,g,s,q,i; e=[]; q=8; i=8;
return{
init:function(j,k){
m=document.getElementById(j); e=m.getElementsByTagName('li');
var i,l,w,p; i=0; l=e.length;
for(i;i<l;i++){
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};
}
g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
},
mo:function(d){
clearInterval(m.tm);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
},
mv:function(el,ew){
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!=el||w!=ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q;
g.style.width=(w+wi)+'px'}
}else{clearInterval(m.tm)}
}};}();
</script>

Letakan Kode berikut diantara tag <body> dan </body>

Contoh HTML Menu:

<body onload="menuSlider.init('menu','slide')">
<center>
<div class="menu">
 <ul id="menu">
  <li value="1"><a href="#">| Home |</a></li>
  <li><a href="#">| CSS Tutorial |</a></li>
  <li><a href="#">| Javascript |</a></li>
  <li><a href="#">| Image Gallery |</a></li>
  <li><a href="#">| Horizontal Menu |</a></li>
  <li><a href="#">| Vertical Menu |</a></li>
  <li><a href="#">| JQuery |</a></li>
  <li><a href="#">| Template |</a></li>
  <li><a href="#">| Floating Menu |</a></li>
  <li><a href="#">| Animation gif |</a></li> 
 </ul>
<div id="slide"><!-- --></div>
</div>
</center>

Catatan :

Jangan lupa untuk menyelipkan onload="menuSlider.init('menu','slide')" di tag body
Ganti Nama menu seperti Home, Javascript dengan Menu yang kamu butuhkan
Sesuaikan lebar menu dengan panjang/lebar menu yang dibutuhkan dengan merubah nilai width: 995px (pada KODE CSS di bagian ".menu")
Supaya Template lebih ringkas, sebaiknya upload KODE CSS dan Javascript di file hosting dan gunakan KODE seperti dibawah ini di bagian head sebagai pengganti CSS dan javascript.

- <link href="URL.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="URL_javascript.js"></script>