10.12.11

Tutorial : Vertical Menu Tab

Author : Nabila Medan Time : 12/10/2011 03:38:00 PM Total Comment : 4 Label :

Assalammualaikum.

Vertical Menu Tab
Credit From : Faqihah and Kak Una

1.Dashboard > Design > Add a Gadget > HTML/JavaScript
2.Copy and paste code bawah ni dibhgian 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>
3.Tukarkan :
Merah-Width ikut sidebar korang
Biru-Warna Tab sebelum disentuh
Ungu-Warna Tab selepas disentuh
Hijau-Letak link
Kuning-Perkataan/ayat
4.Terus SAVE!


Peringatan! - JANGAN Tekan "Rich Text" sebab nanti tak menjadi.
p/s : tutor ni memang ajak susah.bak kata Faqihah ia perlukan kesabaran :)



4 comments

Saturday, December 10, 2011 4:00:00 PM Delete! [Reply Comment]

bgus la tutorial nie..nnti bile akak ade wat pages, akak try ye..
btw, nabila ade xwat tutorial psl camne nk ltak scroll bar cam yg nabila ltak kat "Old Post" tue? hehe..

Sunday, December 11, 2011 4:22:00 PM Delete! [Reply Comment]

Dah terai tp nape dia tak gerak cam Nabila punye ek? Huhuu.. musykil. Tenkiu.

Friday, March 16, 2012 6:50:00 PM Delete! [Reply Comment]

akak,saya dah buat...xpi macam mana nak letak ayat dalam menu tab macam akak buat tue...
*s0rry yer tanyer c0z masih bl0m mahir dalam bl0g ini

Friday, August 22, 2014 3:02:00 PM Delete! [Reply Comment]

mekasih utk tuto yg simple ni. hikhik

Post a Comment
Related Posts Plugin for WordPress, Blogger...