[FD's BlOg] - Thêm một hiệu ứng nữa của mootools, lần này ứng dụng để tạo menu sidebar, có kết hợp sổ dọc menu các menu con. Hiệu ứng trông rất bắt mắt, thích hợp cho những ai thích tạo menu ở sidebar. Ngòai ra mở rộng thêm có thể áp dụng cho các widget ở side, khi đó blog sẽ trông rất đẹp và gọn. Nhưng ở đây mình sẽ giới thiệu trước thủ thuật này cho menu.Xem demo trực tiếp tại đây :http://data.fandung.com/blog/demo/sidebar-Moomenu/index.html
Hình minh họa:
Đầu tiên các bạn chèn code Java và code CSS vào template:
1. Đăng nhập blog
2. Vào bố cục (Lauyout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Chèn code java vào dưới thẻ <head> hoặc trên thẻ </head>
<script type="text/javascript" src="http://data.fandung.com/js/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var accordion = new Accordion('h3.menusection', 'div.menusection', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#333333');
toggler.setStyle('background', '#FFFFCC');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#FFFFFF');
toggler.setStyle('background', '#999999');
}
}, $('accordion'));
});
</script>
- Chú ý:
+ nên up file java http://data.fandung.com/blog/demo/sidebar-Moomenu/mootools.svn.js lên host riêng để tránh trường hợp hết bandwidth.
+ có thể sửa các code màu xanh trong code Java trên.(thay các trị màu theo ý bạn)
5. Tiếp tục tìm đến dòng ]]></b:skin> chèn trên nó đọan code CSS bên dưới :
}
ul, li, h3 {
border:0;
padding:0;
margin:0;
list-style:none;
}
h3{
background:#CCCCCC;
padding:4px;
font-size:12px;
color:#999999;
border-bottom:solid 2px #999999;
}
#main-moo{
width:200px;
margin:10px auto;
}
#accordion li{
border-bottom:solid 1px #DEDEDE;
}
#accordion li a{
padding:3px 6px; display:block;
text-decoration:none;
}
#accordion li a:hover{
background:#EFEFEF;}
- Thay các code màu theo ý của bạn.
6. Save template
7. Vào phần tử trang, tạo widget HTML/Javascript, chèn đọan code HTML bên dưới vào :
<div id="main-moo">
<div id="accordion">
<h3 class="toggler menusection">Home</h3>
<div class="element menusection">
<ul>
<li><a href="#1">About FD</a></li>
<li><a href="2">Contact</a></li>
<li><a href="3">RSS</a></li>
<li><a href="4">Help</a></li>
</ul>
</div>
<h3 class="toggler menusection">Blog Tips</h3>
<div class="element menusection">
<ul>
<li><a href="#1">Tips</a></li>
<li><a href="2">Design</a></li>
<li><a href="3">Hack</a></li>
<li><a href="4">Blogger</a></li>
</ul>
</div>
<h3 class="toggler menusection">Web Design</h3>
<div class="element menusection">
<ul>
<li><a href="#1">HTML</a></li>
<li><a href="2">CSS</a></li>
<li><a href="3">Javascript</a></li>
<li><a href="4">Flash</a></li>
</ul>
</div>
</div>
</div>
8. Save lại là xong.
Chúc các bạn thành công.