Side menu : Hiệu ứng động (một ứng dụng của mootools)
Thứ Sáu, 8 tháng 5, 2009
[FD's BlOg] - Bài viết hôm nay mình sẽ bổ xung tiếp vào kho style menu sidebar, một menu động, khá lạ mắt. Thủ thuật này lại sử dụng mootools để tạo hiệu ứng.Các bạn có thể xem demo ở đây : http://data.fandung.com/blog/demo/elasticmenu/index.html .
Hình minh họa:
☼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.
Comments[ 0 ]
Đăng nhận xét