Categories: Javascript

jQuery Mega Menu – tạo menu cho website theo cách chuyên nghiệp

jQuery Mega Menu là 1 jquery plugin được phát triển bởi GeekTantra. Với MegaMenu bạn có thể dễ dàng tạo menu theo phong cách riêng của mình. MegaMenu hỗ trợ menu hiển thị với nhiều hiệu ứng như slideDown/slideUp, fadeIn/fadeOut và các hiệu ứng đơn giản khác. MegaMenu rất nhẹ vì chủ yếu sử dụng CSS và javascript làm nền tảng. Với MegaMenu việc của bạn là sáng tạo menu tạo ra các HTML và việc còn lại là chèn nó cùng với MegaMenu vào website của bạn.
Nếu bạn đã sử dụng MegaMenu thì bạn cũng sẽ dễ dàng hiểu rằng tại sao rất nhiều website lớn trên thế giới sử dụng nó như:

Walmart

Mega menu Walmart

Adidas

Nike

và nhiều website khác như mydeco.com, like.com….

Ở Việt Nam có nhiều website lớn sử dụng MegaMenu như Zing, Mediamart…

Download Jquery Mega Menu tại đây: jquery-megamenu.2.0.zip

Để sử dụng:

Trong phần header của HTML thêm như sau:

[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="javascripts/jquery.megamenu.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery(".megamenu").megamenu();
});
// ]]></script>
[/html]

Tiếp theo trong body thêm đoạn code sau:

[html]</pre>
<ul class="megamenu">
<li><a href="javascript: void(0)">First Menu</a>
<div style="width: 350px;">Contents of the first mega menu</div></li>
<li><a href="javascript: void(0)">Second Menu</a>
<div style="width: 350px;">Contents of the second mega menu</div></li>
</ul>
<pre>
[/html]

Nếu bạn sử dụng MegaMenu bạn sẽ thấy nó thật tuyệt vời. Để tham khảo thêm các bạn truy cập trang chủ của MegaMenu: http://www.geektantra.com/2009/09/jquery-mega-menu/.Chúc các bạn thành công.

admin

Đơn giản là mình là người đam mê công nghệ, thích học hỏi và chia sẻ. Mình mong muốn nhận được phản hồi của các bạn khi xem bất kỳ bài viết nào trên blog của mình. Mỗi ý kiến đóng góp, mỗi sự sẻ chia và góp ý của các bạn là điều mình cần nhất để blog hoàn thiện hơn. Điều đó thật sự quan trọng đối với mình. Xin chân thành cảm ơn!

Recent Posts

Sao chép dữ liệu từ Google Sheets Docs chỉ xem (2025)

Sao Chép Dữ Liệu Từ Google Sheets Chỉ Xem: Hướng Dẫn Chi Tiết Bạn đang…

3 tuần ago

Fix Layout bàn phím Tiếng Việt ENG-VI để sử dụng Windows + H và Unikey

Để sử dụng tính năng nhập liệu giọng nói tiếng Việt (Windows + H) đồng…

4 tuần ago

Cách tích hợp AI Gemini cho Google Sheets với hàm AskGPT tùy chỉnh

Bạn có bao giờ muốn "hỏi" trí tuệ nhân tạo trực tiếp từ bảng tính…

4 tuần ago

Thông báo tạm ngừng hoạt động

Lâu nay do một số vấn đề cá nhân nên admin không còn cập nhật…

2 năm ago

Adobe cho tải miễn phí bộ ứng dụng CS2

Năm 2013 đã đến, và Adobe quyết định tung ra một chương trình khuyến mãi…

7 năm ago

Link down đế chế 1 chuẩn Age Of Empires 1 Setup

Age Of Empires 1 Setup by Microsoft Studios Published October 15, 1997 Usage CC0 1.0…

8 năm ago