Xem Demo.
Nếu bạn thích hiệu ứng này cho trang web của mình thì thực hiện theo các bước sau đây.
1. Đặt toàn bộ đoạn code dưới đây vào trước thẻ </head>.
<style type='text/css'>
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
</style>
<script src='http://sandbox.leigeber.com/slidemenu/slidemenu.js' type='text/javascript'></script>
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
</style>
<script src='http://sandbox.leigeber.com/slidemenu/slidemenu.js' type='text/javascript'></script>
2. Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>).
<ul id="sm" class="sm">
<li>Nội dung 1</li>
<li>Nội dung 2</li>
<li>Nội dung 3</li>
</ul>
<li>Nội dung 1</li>
<li>Nội dung 2</li>
<li>Nội dung 3</li>
</ul>
3. Gọi chức năng onload bằng cách thay thẻ <body> bằng <body onload="slideMenu.build('sm',200,10,10,1)"> hoặc có thể đặt đoạn code sau đây vào trước thẻ </body>.
<script type='text/javascript'>slideMenu.build('sm',200,10,10,1);</script>
Chú ý thông số đầu tiên (sm) là id cho danh mục bạn muốn tạo hiệu ứng đàn xếp. Thông số thứ 2 (200) là bề rộng bạn muốn phần xếp mở rộng ra. Thông số thứ 3 (10) là biến thời gian gọi chức năng trượt. Thông số thứ 4 (10) là tốc độ hiệu ứng với số 1 là nhanh nhất. Thông số cuối cùng tùy chọn và là số ám chỉ phần được mở rộng khi hiệu ứng được load xong.
No comments:
Post a Comment