13 October 2011

Tutorial Cute Vertical Tab Menu



Cuba korang tengok Tab Menu atas ni . Cantik tak? Tab Menu atas ni la yang Aisyah nak buat pada hari ni .
Pergi ke HTML/JavaScript

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:240px;
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: write;
text-align:center;
text-decoration: none;
padding: 0px;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
-webkit-transition-duration: 0.2s;
border-top-left-radius: 15px 15px;
border-top-right-radius: 15px 15px;
border-bottom-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
border-top:2px dashed #ffff00;
border-bottom:2px dashed #FFFFFF;
background: url("background korang");repeat ; /*background of tabs (default state)*/}
.sidebarmenu ul li a:visited{
color: white;}
.sidebarmenu ul li a:hover{
-moz-box-shadow: 0 0 15px 5px #F9B7FF;
-webkit-box-shadow: 0 0 15px 5px #00FF00;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
-webkit-transition-duration: 0.6s;
border-right:29px solid #FFFFFF;
border-left:29px solid #FFFFFF;
border-top:4px dashed #FFFFFF;
border-bottom:4px solid #FFFFFF;
background: url("background korang");repeat ;}
/* 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">♥ HOME ♥</a></li>
<li><a href="link korang">✿ ABOUT ME ✿</a></li>
<li><a href="link korang">♥ TUTORIAL ♥</a></li>
<li><a href="link korang">✿ FREEBIES ✿</a></li>
</ul>
</div>

MERAH ► Kod warne boleh pergi sini .
BIRU ► Background korang
PINK ► Link korang
HIGHLIGHT BIRU ► Yang Aisyah Highlight kan warne Biru tu untuk nama perkataan tab menu korang .

5 Comment Blog Aisyah Bunny ♥:

aisyahfarzana said...

hi

mrs jihah said...

klau link tutorial nk ambil kt mnew ???

Mazniza Hazwani said...

comel..buat toturial ni pun masa bufday saya.bagus bagus.hehe

Unknown said...

TQ FOR THE TUTO

Unknown said...

Kalau Nak Link Untuk About Me katne ?

Post a Comment