Cách sử dụng
<!-- 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