Home » Thủ thuật blog
Side menu : Hiệu ứng động (một ứng dụng của mootools)
Thứ Sáu, 8 tháng 5, 2009
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtoLnmM1VNXWZmETSKXc-RYKa8jhkRupgUDVY0Lw4jWFTU0jLgeFZHdm-Zyl0ybTdc1nCxDKnuYJP1sK-irHoupYn4hZOZbjkvNdkh3ogFRMxGOtP7AofvIzsZdNMbD2zqWtzyyjaLqp2x/s200/54.gif)
Các bạn có thể xem demo ở đây : http://data.fandung.com/blog/demo/elasticmenu/index.html .
Hình minh họa:
![](http://lh4.ggpht.com/_TqPdHmAEwTM/SVzjiLerXjI/AAAAAAAADO4/hodoO6MyZ5A/elastic3.png)
☼Bắt đầu:
- Đăng nhập blog
- Vào bố cục (Layout)
- Vào chỉnh sửa code HTML (Edit code HTML)
1. Trước tiên chèn đọan code java bên dưới vào ngay sau dòng <head>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/elasticmenu/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#menu li').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
var fxopacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0,100);
fxopacity.start(0.5);
},
'mouseleave' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0);
fxopacity.start(1);
}
});
})
});
</script>
<script type="text/javascript">
window.addEvent('domready', function(){
$$('#menu li').each(function(item){
var o = item.id
var fx = new Fx.Style(o, 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
var fxopacity = new Fx.Style(o, 'opacity', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
item.addEvents({
'mouseenter' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0,100);
fxopacity.start(0.5);
},
'mouseleave' : function(e){
fx.stop()
fxopacity.stop()
fx.start(0);
fxopacity.start(1);
}
});
})
});
</script>
2. Chèn đọan code CSS lên trên dòng ]]></b:skin>
a:link, a:visited, a:hover{color:#0066CC}
#menu{}
#menu li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-bottom:2px;
}
#menu li a{
display:block;
padding:4px;
background:#DEDEDE;
text-decoration:none;
}
3. Save template lại.
4. Vào phần tử trang
5. Tạo một widget HTML/Javascript, và điền đọan code HTML bên dưới vào:
<ul id="menu">
<li id="l1"><a href="#">Home</a></li>
<li id="l2"><a href="#">My Profile</a></li>
<li id="l3"><a href="#">CSS</a></li>
<li id="l4"><a href="#">FD' BlOg</a></li>
<li id="l5"><a href="#">Download</a></li>
<li id="l6"><a href="#">Contact</a></li>
</ul>
- Chú ý: thay code màu xanh lại theo đúng như của bạn.
6. Save lại là xong.
Chúc các bạn thành công.
![](http://4.bp.blogspot.com/-JE_IPFlB95A/T2xOXxddz4I/AAAAAAAAA2I/sYgUF3LxUdw/s1600/tinkhac.jpg)
Comments[ 0 ]
Đăng nhận xét