Home »
TUTORIAL= Menu tab vertical di sidebar
ASSALAMUALAIKUM
#maaf penggunaan aku#
Lama sungguh tak buat tuto kan? ok tuto kali ni pasal menu tab vertical di sidebar. Klik gambar kat atas kalau nak lihat dengan lebih jelas.
So nak buat tak? let's try..
1) Dashboard > layout > add gadjet > Html/ Javascript
2) Copy kod kat bawah ni dan pastekan kat Html/Javascript
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:200;
text align:center;
list-style-type: none;
font: normal 15px calibri;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
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: #F6CEF5; /*background of tabs (default state)*/}
.sidebarmenu ul li a:visited{
color: black;}
.sidebarmenu ul li a:hover{
background-color: #F8E0F7;}
/* 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"target="_blank">TAJUK</a></li>
<li><a href="LINK"target="_blank">TAJUK</a></li>
<li><a href="LINK"target="_blank">TAJUK</a></li>
<li><a href="LINK"target="_blank">TAJUK</a></li>
<li><a href="LINK"target="_blank">TAJUK</a></li>
</ul>
</div>
3) Hijau= saiz tulisan dan kotak.
Merah= warna background.
oren= warna hover.
biru= letak link dengan tajuk.
p/s = copy or delete kod <li><a href="LINK"target="_blank">TAJUK</a></li> jika korang nak tambah menu tab or buang lebihan menu tab.
4) dah siap? save dan terus view kat blog korang.
Sudah baca??sila like or komen:)
0 000 Pengomen Handalan:):
Catat Ulasan
SALAM:)
1)tinggalkan komen
2)follow
3)like sekali:)