Loading post navigation ...
 
 

Pro page

7
Nhận xét

Menu sidebar (Main Menu and Submenu) hiệu ứng cực cool - Mootools effect

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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 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.


Enter your mail address:

7

soft-hot

bạn ơi mình muốn làm menu nhu vậy nhưng không sử dụng mootools có đượng không.Nó chỉ cần mở ra không cần trượt ,vì nó xong đột với 1 file js của mình.khi cài vào là cái kia không hoat động

fandung

nếu bạn không dùng javascript thì sẽ không có hiệu ứng đóng mở menu.

xung đột là sao nhỉ,các hàm trong mấy đọan script thường khác nhau mà.

Thứ 2 nữa là bạn nên xem lại các tên của class, id trong code CSS xem chúng có bị trùng không.

Chinhnd

☼ RELATED POSTS ☼ bị lỗi FD ôi.

Chinhnd

Cam ơn, bài hữu ích này, mình giới thiệu bên weblog mình bài này nhé.

Chuyện cũ bỏ qua đi nhé FD, gửi mail rồi đó bạn nhận được chưa?

Chinhnd

Fandung ởi, em thử test xem nó không hoạt động được bên IE, có cách nào giải quyết không em?

miendi.com

- Chaò anh FanDung.

- Anh có thể giúp em dùng thủ thuật này chung với jquery được không anh , rất mong anh giúp đỡ ( vì em cần gấp , mà lại không thể bỏ thủ thuật này ), khi em dùng motools trong blog thì tất cả các thủ thuật có xử dụng jquery đều không hoạt động , mong anh hồi âm , cảm ơn anh rất nhiều .

tueman84

Dũng xem lại đi, các thủ thuật của Dũng bị die hết cái java rồi, up lại cho anh em với. Thanks nhé.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[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.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home