Zôntek

• 043.5122.789 |
• lienhe@zonotek.vn |
• 
• 

• Trang chủ
• Khóa học
  • Adobe Photoshop CS6
  • Adobe Illustrator CS6
  • Adobe Flash CS6
  • PHP & MySQL
  • PHP Adv | CodeIgniter
  • Giao diện website với HTML CSS và jQuery
  • Thiết kế website bán hàng với Wordpress
  • Tin học văn phòng chuyên nghiệp
• Lớp miễn phí
  • Tự tay code website bán hàng hoàn chỉnh
  • Màu sắc trong thiết kế đồ họa
• Lịch khai giảng
• Tài liệu hướng dẫn
  • Học Photoshop
  • Học Illustrator
  • Học Flash
  • Học lập trình PHP
  • Học thiết kế website
• Tin tức
• Giới thiệu
  • Sơ lược về Zonotek
  • Hình ảnh Zonotek
• Liên hệ

:: Trang chủ ›

Học thiết kế website ›

Menu 3D với jQuery và CSS3

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">

	<dt>Sashimi</dt>

	<dd><a href="#">Maguro</a></dd>

	<dd><a href="#">Toro</a></dd>

	<dd><a href="#">Ebi</a></dd>

	<dd><a href="#">Saba</a></dd>

	<dd><a href="#">Ika</a></dd>

	<dd><a href="#">Tako</a></dd>

	<dd><a href="#">Tomago</a></dd>

	<dd><a href="#">Kani</a></dd>

	<dd><a href="#">Katsuo</a></dd>

	<dd><a href="#">Maguro</a></dd>

</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'.

Các tài liệu khác

• Hướng dẫn xây dựng menu dọc một cấp đơn giản
• Hướng dẫn Sử dụng thẻ IFRAME
• Cách tạo hiệu ứng CSS Rollover với Adobe Dreamweaver
• Cấu trúc cơ bản của một tài liệu HTML5
• Những công cụ hữu ích giúp bạn làm giao diện Responsive (phần 1)

Lý do bạn lựa chọn chúng tôi

• Hệ thống phòng máy với máy tính, máy chiếu được trang bị đồng bộ
• Thời gian thực hành ngoài giờ miễn phí
• Luôn cam kết chất lượng cao nhất cho mỗi khóa học. Học viên được học lại miễn phí
• Giảng viên giàu kinh nghiệm giảng dạy, đã và đang tham gia nhiều dự án lớn trên thực tế
• Zonotek là đối tác tuyển dụng của nhiều doanh nghiệp lớn như Hanel, Dai An Media, Kitagawa Enterprise, True Plus Việt Nam, Kim Phat Group...
• Giáo trình theo chuẩn quốc tế luôn được cập nhật một cách nhanh nhất
• Học phí hợp lý, nhiều ưu đãi, nhiều quà tặng
• Thời gian học linh hoạt, phù hợp với nhiều đối tượng học viên

Tài liệu hướng dẫn mới nhất

Hiệu Ứng Ánh Sáng

 Bài này hướng dẫn làm thế nào để tạo ra một hiệu ứng ánh sáng đẹp và kỳ diệu

chi tiết

Cách minh họa chữ từ phác thảo đến vẽ vector trong illustrator

Chữ minh họa, thay vì phải cần hình ảnh tiêu chuẩn với một cái tiêu đề hay vài đoạn văn bản sao chép, đối với tôi, thực sự chỉ cần lấy một phần trong số đó cho những thao tác tiếp theo. 

chi tiết

Vẽ Hình Khối 3D Với AI

Hôm nay Zonotek xin hướng dẫn các bạn cách vẽ một đồ thị 3D trong illsutrator, mời các bạn theo dõi nhé..
 

chi tiết