Tutorial Drop Down Tab Menu

Drop down tab menu nie utk save space kt tab menu tuu...nampak la kemas sikit kan? so lets starts ! :

1. DASHBOARD > DESIGN > EDIT HTML > tick kotak EXPAND WIDGET > klik DOWNLOAD FULL TEMPLATE untuk backup file.

2. kemudian tekan Ctrl+F dan cari kod ini : </head>  


3. Paste kod bawah ini SEBELUM kod </head> yg dah cari tadi :

<style>#sddm{ margin: 0;padding: 8px 100px 10px 0px;z-index: 30}
#sddm li{ margin: 0;padding: 0;list-style: none;float: left;/*Font of menu top*/font: bold 11px arial}
#sddm li a{ display: block;margin: 0 1px 0 0;padding: 4px 10px;/*width of each menu top*/width: 60px;/*background color of main menu*/background: #ff0000;
/*text color of main menu*/color: #FFFFFF;text-align: center;text-decoration: none}
#sddm li a:hover{
/*background color of main menu on hover*/background: #ff0000}
#sddm div{ position: absolute;visibility: hidden;margin: 0;padding: 0;
/*background color of drop down menu */background: #ff0000;/*border of the drop down menu*/border: 1px solid #000000}
#sddm div a{ position: relative;display: block;margin: 0;padding: 5px 10px;width: auto;white-space: nowrap;text-align: left;text-decoration: none;/*background color of each menu element*/background: #FFFFFF;/*text color of each menu element*/color: #000000;/*font of each menu element*/font: 12px arial}
#sddm div a:hover{/*background of each element on hover*/background: #ff0000;/*font color of each menu item on hover*/color: #FFFFFF}</style><script type='text/javascript'>
var timeout = 500;var closetimer = 500;var ddmenuitem = 0;
// open hidden layerfunction mopen(id){// cancel close timermcancelclosetime();
// close old layerif(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
// get new layer and show itddmenuitem = document.getElementById(id);ddmenuitem.style.visibility = &#39;visible&#39;;
}// close showed layerfunction mclose(){if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;}
// go close timerfunction mclosetime(){closetimer = window.setTimeout(mclose, timeout);}
// cancel close timerfunction mcancelclosetime(){if(closetimer){window.clearTimeout(closetimer);closetimer = null;}}
// close layer when click-outdocument.onclick = mclose;</script>

anda boleh ubah color, width, size font ikut suka anda lah :P


KLIK SAVE !!!


NEXT STEP :


DASHBOARD > DESIGN > PAGE ELEMENTS > ADD A GADGET > HTML/Javascript

<ul id="sddm">
<li><a href=" URL LINK ANDA ">Home</a></li><li><a href=" URL LINK ANDA ">Disclaimer</a></li>
<li><a href="URL LINK ANDA"onmouseover="mopen('m1')"onmouseout="mclosetime()">AYAT ANDA>></a><div id="m1"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href=" URL LINK ANDA "> AYAT ANDA </a><a href=" URL LINK ANDA "> AYAT ANDA </a></div></li>
<li><a href=" URL LINK ANDA "onmouseover="mopen('m2')"onmouseout="mclosetime()"> AYAT ANDA >></a><div id="m2"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href=" URL LINK ANDA "> AYAT ANDA </a><a href=" URL LINK ANDA "> AYAT ANDA </a><a href=" URL LINK ANDA "> AYAT ANDA </a></div></li>
<li><a href=" URL LINK ANDA "> AYAT ANDA </a></li><li><a href=" URL LINK ANDA "> AYAT ANDA </a></li><li><a href=" URL LINK ANDA "> AYAT ANDA  </a></li>
</ul>

edit la dgn url sendiri...kemudia SAVE ! dijamin akan jadi punyerrr ! :DD tak faham tanya je 


credit & boleh refer kat sini !