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.

Cập nhật thêm một dạng khác.

Tiện ích này cách thực hiện kiểu menu trượt của tác giả Andrew Sellick. Tôi đã có điều chỉnh đôi chút so với bản gốc của tác giả. 
 

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sửa HTML

   3- Đặt toàn bộ phần code dưới đây vào trước thẻ </head>.

<script type='text/javascript' src="http://www.google.com/jsapi"></script>
<script> 
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/quangvietmkt-blogspot-menu-doc/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li 
a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmadIDdjL9j07oU284SZmqYjsLpEot3tAojPro6fDlXZ4n_ebD6ZEtkFE_UnBPrRHlSD7LA891-KUdAjEgvqbZ7l0nD_SFkaHzrcSFc75i61SUyNSABZ_AZtUEMXuBgtF2Y2japvn1pgRb/h120/background-namkna-blogspot-com.png);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>

Bạn có thể tùy ý điều chỉnh thuộc tính CSS.

2. Thiết lập cấu trúc HTML như sau và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>.

<div id="menuBar">
<a href="#" id="menuBarTab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9_nOdo_5iqJgPRgmpSRF3ad-gPl49YZ0PGrbMC_V0OOp9YhAkuhDjY7lfYWoOCY4MzlRrw15EujmX4nvbvdBH8IAMR9Gg2y7epDOcUdMgaVEjE8mQkXSixoohv_6NV5QZbk7cXfvEOvZ/h120/slide-but-viettin365-com.gif" alt="menuBar" title="menuBar" /></a><div id="menuBarContents" style="display:none;"> <div id="menuBarContentsInner"> <h2>Menu<span>bar</span></h2> <ul> <li><a href='http://viettin365.com/' title='Home'>Home</a></li> <li><a href='http://quangivetmkt.blogspot.com/search/label/Blogspot-tips' title='Thủ thuật Blog'>Blog Spot Tips</a></li> <li><a href='http://viettin365.com/feeds/comments/default' title='Suscribe Comment Feed'>Comment RSS</a></li> <li><a href='http://quangivetmkt.blogspot.com/p/lien-he.html' title='Contact'>Contact</a></li> </ul> </div> </div> </div>

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.

Chúc thành công!

theo namkna