jQuery lavaLamp menu

Đăng bởi Neo trong mục Hướng dẫn vào 02 tháng 4, 2010 | Comments
Xem Demo

lavaLamp là plugin của jQuery, giúp chúng ta dễ dàng tạo hiệu ứng động cho menu của trang web (tất nhiên bạn có thể áp dụng lavaLamp vào các thành phần khác, không nhất thiết ở menu). Hiện tại VannyNeo đang sử dụng plugin này trên thanh menu

Cách sử dụng

Trước tiên, bạn cần download jQuery, easing plugin và LavaLamp plugin. Sau đó thêm vào trong thẻ <head> của trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- jQuery Easing Load -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>

Mã HTML của menu, nếu bạn dùng các CMS mở như Drupal, Joomla, Wordpress thì bạn đã có sẵn mã HTML này, chỉ cần áp dụng plugin vào & thêm code CSS

<ul class="lavaLamp">
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Tổng hợp</a></li>
<li><a href="#">Hướng dẫn</a></li>
<li><a href="#">Miễn phí</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>

Bạn có thể dổi tên class .lavaLamp thành bất cứ tên gì bạn muốn. Plugin sẽ tự động tạo thêm đoạn mã:

<li class="back"><div class="left"></div></li>

Sau đó bạn cần thêm mã CSS:

.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Chuyển thất cả menu hiển thị thành hàng ngang */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Đặt thuộc tính background cho menu đang active */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles cho các menu khác */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

Cuối cùng là đoạn mã gọi plugin lên làm việc

/* $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});  Không dùng cách này */
$(function() { $(".lavaLamp").lavaLamp({ fx: "linear", speed: 700 })});

Tất nhiên nếu bạn đổi tên class .lavaLamp thành tên khác thì bạn cần đổi tên ở cả trong style và đoạn mã gọi plugin lên làm việc. Danh sách các hiệu ứng (fx) bạn có thể xem ở đây

plugin, menu, jquery

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter