Thư viện

Trải nghiệm

Thứ Bảy, tháng 8 13, 2011

Sexy Sliding menu sidebar trượt độc đáo sử dụng Mootools

Sexy Sliding menu sidebar trượt độc đáo sử dụng Mootools - Sexy Sliding JavaScript Side Bar Menu Using Mootools

Chia sẻ:
Sexy Sliding menu sidebar trượt độc đáo sử dụng Mootools - Sexy Sliding JavaScript Side Bar Menu Using Mootools - http://namkna.blogspot.com/
Scriptaculous là một thư viện JavaScript được xây dựng trên Prototype JavaScript Framework, cung cấp các hiệu ứng động trực quan và các thành phần giao diện người dùng thông qua Document Object Model (DOM).
Scriptaculous có thể được sử dụng để tạo hiệu ứng trượt độc đáo cho thanh menu. 



Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Phần tử trang
   3- Chọn Thêm Tiện ích
   3- Chọn HTML/javrscrip  
   4- Thêm đoạn code sau vào.
<script src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/effects.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://2.bp.blogspot.com/-cS2VTJFW8rA/T3u6d6c5RMI/AAAAAAAAA5E/p_ESW4wnpEo/s1600/left.collapse.border-namkna-blogspot-com.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://3.bp.blogspot.com/-0HjrIC9NE4A/T3u6vTLLHkI/AAAAAAAAA5M/gMlbE0DWpOs/s1600/sidebarcollapse-namkna-blogspot-com.png" title="sideBar" /></a>
</div>
Bạn có thể tùy ý điều chỉnh thuộc tính CSS.
Lúc này bạn chỉ việc thay đổi các tên menu và liên kết tương ứng trong cấu trúc HTML ở trên là bạn sẽ có một kiểu menu trượt độc đáo rồi đấy. Kiểu menu này có thể được cài đặt dễ dàng cho Blogger.


1 nhận xét:

  1. add code nhung k trượt ra được kha ơi. "#" mình k bít chèn link gì vào cả. thay nhìu link lắm mà k được. giúp mình nhé

    Trả lờiXóa