Tutorial - Buat Verticle Menu Tab

1.Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

 

2.Copy and paste code bawah ni dekat HTML/JavaScript

 

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{

width:250;

text align:center;

list-style-type: none;

font: normal 13px Century gothic;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-align:center;

text-decoration: none;

padding: 0px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #C6C6C6; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #000000;}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){

for (var i=0; i<menuids.length; i++){

  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

    for (var t=0; t<ultags.length; t++){

    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

  else //else if this is a sub level submenu (ul)

    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

    ultags[t].parentNode.onmouseover=function(){

    this.getElementsByTagName("ul")[0].style.display="block"

    }

    ultags[t].parentNode.onmouseout=function(){

    this.getElementsByTagName("ul")[0].style.display="none"

    }

    }

  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

  ultags[t].style.visibility="visible"

  ultags[t].style.display="none"

  }

  }

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

</script>

<div class="sidebarmenu">

<ul id="sidebarmenu1">

<li><a href="LINK">HOME</a></li>

<li><a href="LINK">ABOUT ME</a></li>

<li><a href="LINK">TUTOTIAL</a></li>

<li><a href="LINK">TAGBOARD</a></li>

</ul>

</div></center></center>

 

 

Haa , happy , happy gakk bilee korangg dahh copy paste , but .... jangan lupee nakk tukar. Kalau takk , memangg takk menjadi laa Menu tab korangg tu . Hehe .. okeyyy3 .. Bacee nieyy ye..

Tulisan Merah , korangg tukarr laa width ikut sidebar korangg nakk

Tulisan Biru untuk warna Tab sebelum disentuh

Tulisan Ungu pulakk warna Tab selepas disentuh

Tulisan Hijau korangg letak laa link yangg korangg nakk link kann tu ..

Tulisan Kuning tukaa ayat korangg sendiri

 

4.Terus SAVE!

Peringatan! - Korangg JANGAN Tekan "Rich Text" sebab nanti tak menjadi pulakk ^^