Sexy Sliding menu sidebar trượt độc đáo sử dụng Mootools - Trang Tin tức - Giải trí - Thủ thuật tổng hợp - Download tài liệu - Game cho người Việt

Breaking

Business

BANNER 728X90

Saturday, February 16, 2013

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cM8OCVdSbqoHee6mxnEsFWp6qXvBEJ9YECavLaUAWhptKPhQ5dGMQ9DRVjODXremvU2xEvTS-adyA8vsm8pNfRVt3v3n7q54ANP8x1s1tRNw-6gjMhIdvMDP0zijrKIV1SxVqfB8u6UK/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-3pQ0QUHcSTJyucbgpTrqphFmhSDaC_VaPU71NEc8R2ESmYPBOj5SMgT2tghBWy7MaXwUg2w1eJTeENxeMU8A7ZNpx8b3cIvaldYbvFu7QrEMuPtigNi14bXZuJbEZbvV5RkIrJhxU4X/s1600/sidebarcollapse-quangvietmkt-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.




No comments:

Post a Comment