Menu 3D với jQuery và CSS3 02/06/2013

Menu 3D với jQuery và CSS3

Makisu là một dạng menu 3D rất mới với hiệu ứng gập khá mượt mà. Makisu sử dụng các thuộc tính 3D của CSS3 và jQuery để tự động chuyển các dạng list (dd, li) thành dạng 3D gập. Việc này tương đương với bạn phải sử dụng trình duyệt mới, hỗ trợ 3D, rất may là ở những trình duyệt không hỗ trợ thì plugin sẽ hiển thị thành dạng list bình thường.


Plugin có các lựa chọn tùy biến như thời gian thực hiện hiệu ứng, mầu sắc, perspective (chưa rõ là cái gì, liên quan đến việc transform 3D).

Hướng dẫn sử dụng

Trước tiên là thêm jQuery và Makisu vào website:
    <script src="jquery.1.8.0.js"> </script>
    <script src="js/makisu.js"> </script>

Bạn có thể sử dụng mã HTML dạng ul li, demo của site dùng dd như sau:
    <dl class="list maki"><br>
        <dt>Sashimi</dt><br>
        <dd><a href="#">Maguro</a></dd><br>
        <dd><a href="#">Toro</a></dd><br>
        <dd><a href="#">Ebi</a></dd><br>
        <dd><a href="#">Saba</a></dd><br>
        <dd><a href="#">Ika</a></dd><br>
        <dd><a href="#">Tako</a></dd><br>
        <dd><a href="#">Tomago</a></dd><br>
        <dd><a href="#">Kani</a></dd><br>
        <dd><a href="#">Katsuo</a></dd><br>
        <dd><a href="#">Maguro</a></dd><br>
    </dl>

Gọi Makisu lên hoạt động:
    if ( $.fn.makisu.enabled ) {
      $( '.maki' ).makisu({
          selector: 'dd',
          overlap: 0.6,
          speed: 0.85
      });
    $( '.maki' ).makisu('open'); // lệnh giúp mở menu, bạn có thể áp vào một nút. Các giá trị: open/close/toggle
    }

Ở đây bạn sẽ thấy có 1 hàm kiểm tra xem đã có makisu hay chưa. Nếu chắc chắn là bạn đã thêm rồi thì có thể bỏ hàm kiểm tra này đi. Nếu bạn dùng ul, li thì phần selector sẽ là 'li'.

Facebook chat