Thứ bảy, ngày 3 tháng 12 năm 2016

jQuery lavaLamp menu

Ngày đăng: 27/4/2011, 16:45:11AM | Lượt xem: 3,113
Hot!

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

Demo

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:

1 <!-- Thư viện jQuery -->
2 <script type="text/javascript" src="js/jquery.min.js"></script>
3 <!-- jQuery Easing Load -->
4 <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
5 <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

1 <ul class="lavaLamp">
2 <li><a href="#">Trang chủ</a></li>
3 <li><a href="#">Tổng hợp</a></li>
4 <li><a href="#">Hướng dẫn</a></li>
5 <li><a href="#">Miễn phí</a></li>
6 <li><a href="#">Liên hệ</a></li>
7 </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ã:

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

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

01 .lavaLamp {
02     position: relative;
03     height: 29px; width: 421px;
04     background: url("../image/bg.gif") no-repeat top;
05     padding: 15px; margin: 10px 0;
06     overflow: hidden;
07 }
08     /* Chuyển thất cả menu hiển thị thành hàng ngang */
09     .lavaLamp li {
10         float: left;
11         list-style: none;
12     }
13         /* Đặt thuộc tính background cho menu đang active */
14         .lavaLamp li.back {
15             background: url("../image/lava.gif") no-repeat right -30px;
16             width: 9px; height: 30px;
17             z-index: 8;
18             position: absolute;
19         }
20             .lavaLamp li.back .left {
21                 background: url("../image/lava.gif") no-repeat top left;
22                 height: 30px;
23                 margin-right: 9px;
24             }
25         /* Styles cho các menu khác */
26         .lavaLamp li a {
27             position: relative; overflow: hidden;
28             text-decoration: none;
29             text-transform: uppercase;
30             font: bold 14px arial;
31             color: #fff; outline: none;
32             text-align: center;
33             height: 30px; top: 7px;
34             z-index: 10; letter-spacing: 0;
35             float: left; display: block;
36             margin: auto 10px;
37         }

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

1 /* $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});  Không dùng cách này */
2 $(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

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.