RSSJquery

Makisu - CSS 3D Dropdown

Makisu là một dạng menu 3D Dropdown của tác giả soulwire. Makisu dựa vào jQuery và hiệu ứng 3D trong CSS3. Và plugin này có nhiều lựa chọn tuỳ biến nổi bật.

Để sử dụng hiệu ứng này, trước hết đưa hai đoạn js vào website.

  
 	 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 	 <script src="/js/makisu.js"></script>
  

Cấu trúc HTML

  
		<dl class="list sashimi"dd>
            <dtdd>Sashimi</dtdd>
            <dd><a href="#"dd>Maguro</a></dd>
            <dd><a href="#"dd>Toro</a></dd>
            <dd><a href="#"dd>Ebi</a></dd>
            <dd><a href="#"dd>Saba</a></dd>
            <dd><a href="#"dd>Ika</a></dd>
            <dd><a href="#"dd>Tako</a></dd>
            <dd><a href="#"dd>Tomago</a></dd>
            <dd><a href="#"dd>Kani</a></dd>
            <dd><a href="#"dd>Katsuo</a></dd>
            <dd><a href="#"dd>Maguro</a></dd>
        </dldd>
 	

Cách hoạt động

 
		<script>
			if ( $.fn.makisu.enabled ) {
				var $sashimi = $( '.sashimi' );
				var $nigiri = $( '.nigiri' );
				var $maki = $( '.maki' );
	
				// Create Makisus
	
				$nigiri.makisu({
					selector: 'dd',
					overlap: 0.85,
					speed: 1.7
				});
	
				$maki.makisu({
					selector: 'dd',
					overlap: 0.6,
					speed: 0.85
				});
	
				$sashimi.makisu({
					selector: 'dd',
					overlap: 0.2,
					speed: 0.5
				});
	
				// Open all
				
				$( '.list' ).makisu( 'open' );
	
				// Toggle on click
	
				$( '.toggle' ).on( 'click', function() {
					$( '.list' ).makisu( 'toggle' );
				});
	
				// Disable all links
	
				$( '.demo a' ).click( function( event ) {
					event.preventDefault();
				});
	
			} else {
	
				$( '.warning' ).show();
			}
    	</script>
	

$('.list') dùng để gọi selector chứa các phần tử của menu. Nếu bạn dùng <ul>, <li> trong HTML thì phần selector sẽ là <li>

Plugin này chỉ hỗ trợ những trình duyệt mới nhất. Kiểm tra trên IE và Opera thì nó không hỗ trợ và hiển thị câu thông báo như hình dưới đây:

Makisu - CSS 3D Dropdown

Đối với Chrome và Firefox, plugin này hiển thị tốt. Tuy nhiên, ở trình duyệt Firefox, mình cảm thấy nó không có mượt và xuất hiện nhiều răng cưa, đôi lúc cũng mất chữ ở phần menu.

Makisu - CSS 3D Dropdown

Makisu - CSS 3D Dropdown

 

 

Nguồn: Y2Graphic

 

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu