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

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

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

7

19/5/ 5/09 07:05: 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
19/5/ 5/09 07:41: 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.
5/6/0 6/09 09:57: ☼ RELATED POSTS ☼ bị lỗi FD ôi.
5/6/0 6/09 10:20: 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?
18/9/ 9/09 00:34: 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?
5/10/ 0/11 13:59: - 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 .
23/11 1/11 17:15: 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é.