Cấp bậc tác giả:

HTML

jQuery lavaLamp menu

Được viết bởi QuangIT ngày 01/07/2013 lúc 04:42 PM
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).
  • 0
  • 1366
Tải tệp tin: Click ở đây

jQuery lavaLamp menu


Cách sử dụng

Trước tiên, bạn cần download jQuery, easing pluginLavaLamp 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 tấ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

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML