jQuery bài 6

 

1. Đầu tiên bạn khai báo các thư viện cần dùng: 

CODE


<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>

2. Thiết kế menu bằng thể ul và li như sau: 

CODE


<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Sản Phẩm</a></li>
    <li><a href="#">Khách Hàng</a></li>
    <li><a href="#">Liên Hệ</a></li>
</ul>

Bạn có thể dùng 3 style theo phong cách khác nhau dựa theo class css khai báo: lavaLampWithImage, lavaLampNoImage, lavaLampBottomStyle 

3. Khai báo code jQuery để tạo animation(chuyển động ) cho menu: 

CODE


<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700, //tốc độ trược của menu
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

Các bạn có thể download demo bên dưới để tham khảo và chỉnh sửa tùy ý.