RSS Posts 
[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.
Bài viết chưa có nhận xét nào.
» Nội dung phải liên quan tới chủ đề bài viết.
»
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.