16 September 2011

Tutorial : Vertical Menu Tab


Assalamaualikum and Hye :>

Tadi masa berfacebook, Anis Maisarah ask Kihah macam mana Kihah buat Tab macam ni :


Tutorial ini credit to Kak Una :D

Dashboard > Design > Add A Gadget > HTML/JavaScript

Pastekan kod ini kat ruangan 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>
Teka Teki:
MERAH : Width ikut width sidebar.
BIRU : Warna tab before cursor sentuh . SINI
UNGU : Warna tab hover bila cursor sentuh . SINI
HIJAU
 Link bila kita tekan tab tu. SINI
KUNING : Perkataan . 



Save.


Pastu, Kak Una ada tinggalkan pesanan untuk semua. Jangan tekan Rich Text sebab nanti tak akan jadi.


Wassalam
author image

FAQIHAH HUSNI

Hi! I'm the writer and author of this webpage. Currently studying in SM Sains Kubang Pasu or know as KUPSIS in Kedah. A Kedahan girl for sure! 2017 is my senior year there and I'm fighting to 9A+ in SPM. Do pray the good result for me and others 1317 warriors. Thank you for your time :)

12 comments:

  1. Thanks Kihah ! Love you lhaaa :)

    ReplyDelete
  2. kak kiha . kila da bwadd da . n jadi . tapi dalam die tu nak bwadd mcm mne ? die punye tuto semua tu ? faham tak ? kalau takk faham . cbe klick kat kila punye blog . http://aqila-farah.blogspot.com/

    ReplyDelete
  3. Kihah,yang link tu sy tak faham larh:D

    ReplyDelete
  4. thanks kihah..dh lme iema cri tuto nie

    ReplyDelete
  5. Thanks Qihah ! Lama cari ni taw :)

    ReplyDelete
  6. Kihah nak ambik tuto ni... Nanti I credit

    ReplyDelete
  7. nabila amik tutor ni yer.letak credit dah :)

    ReplyDelete
  8. Thank you Kihah . dah berkurun lama nya cari tuto nie . thanks tau !

    ReplyDelete
  9. qihah kenapa tagboard tuhh i ta boleh guna

    ReplyDelete
  10. tq for the tuto.. sngt berguna!

    ReplyDelete

Budi Bahasa Budaya Kita