14 November 2012

Vertical Menu Tab

adam hakimi | 20:21 | |
hye dan assalamualaikum guys. ok, afrina nak buat tutorial untuk harini. vertical menu  tab ni ada pada sidebar afrina. cuba tengok. bila kita halakan cursor, ia akan bertukar warna lain. hope korang faham  ^^v




*new dashboard*
1. Dashboard > Layout > Add a Gadget > Html/JavaScript.

2. Copy code bawah ni dan paste kan dekat ruangan dekat kotak tu. 


<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: #000000; /*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 KORANG">TAJUK</a></li>
<li><a href="LINK KORANG">TAJUK</a></li>
<li><a href="LINK KORANG">TAJUK</a></li>
<li><a href="LINK KORANG">TAJUK</a></li>
<li><a href="LINK KORANG">TAJUK</a></li>
</ul>
</div>



Pengumuman :

#000000 : warna sebelum di sentuh 
#000000 : warna selepas di sentuh
Link korag : letak link korang
Tajuk : letak tajuk apa apa yang korang nak.

kod warna boleh ambik dekat sini

credit : Faqihah Husni  


Photobucket
Copyright © 2012 | Kisahafrina.blogspot.com | All Righted Reserve