HomeHướng dẫn tạo Accordion Menu với Jquery đơn giản, dễ thực hành
Accordion Menu hiện nay khá phổ biến với thiết kế web hiện tại, vì ngoài việc là một
menu, nó có thể tùy biến để hiện thị nội dung, hình ảnh một cách rất chuyên
nghiệp...
Bạn chỉ cần tìm từ khóa Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn cũng có thể xây dựng riêng cho mình một Accordion Menu một cách rất đơn giản và gọn nhẹ.
Xin chia sẽ đến các bạn một đoạn code giúp tạo ra một menu Accordion ấn tượng với jQuery đơn giản. Ưu điểm của loại menu này là có thể tiết kiệm cho bạn nhiều khoảng không gian trên trang web của bạn hơn. Đoạn code dưới đây rất đơn giản nhưng cũng hiều quả và có ích cho bạn đấy, giờ mình cùng xem qua ví dụ sau nhé.
Bạn chỉ cần tìm từ khóa Accordion Menu là ra rất nhiều plugin, tuy nhiên bạn cũng có thể xây dựng riêng cho mình một Accordion Menu một cách rất đơn giản và gọn nhẹ.
Xin chia sẽ đến các bạn một đoạn code giúp tạo ra một menu Accordion ấn tượng với jQuery đơn giản. Ưu điểm của loại menu này là có thể tiết kiệm cho bạn nhiều khoảng không gian trên trang web của bạn hơn. Đoạn code dưới đây rất đơn giản nhưng cũng hiều quả và có ích cho bạn đấy, giờ mình cùng xem qua ví dụ sau nhé.
Để làm được như vậy, đầu tiên bạn cần tạo ra
một thư mục chứa các file sau: index.html, style.css, download tập tin thư viện
của jquery : http://jquery.com/download/
rồi để vào đó.(ở đây mình đã download về rồi đặt lại tên nó là: jquery.js =>
nó là thư viện javascript để mình sử dụng các hiệu ứng của jquery)
Xong bước trên, bạn mở file index.html bằng
notepad++ , code mã như hình sau:
Bước 2, bạn mở file style.css lên và code style
css cho ví dụ trên, và mã code css đơn giản của mình như hình sau:
Bước 2 đơn giản chỉ với vài dòng code trên
thôi, vì mình chỉ style nó cho một thuộc tính là h3 thôi. Và đến bước gần cuối
cùng, là mình viết hiệu ứng jquery cho nó. Mã code cũng đơn giản và ngắn gọn,
dễ hiểu, dễ áp dụng nè:
Đoạn script trên bạn để nó ở trong phần thẻ head của file index.html nhé, như này nè:
Sau khi save tất các file lại, bạn chạy file
index.html để hưởng thụ thành quả của mình nhé.
Chúc các bạn thành công!!
Một cách viết Jquery tương tự như hình dưới, để
các bạn tham khảo nè:
-Chú ý nhỏ nè các bạn:
+) Phần quan trọng để thẻ div class=”accordion” hiện ra, là phải thêm RETURN FALSE vào
cuối function, nó sẽ thoát ngay lập tức, không quay lại vòng lặp.
+)Nếu không có RETURN FALSE, nó sẽ quay vòng
lặp và hide (ẩn) thẻ div class=”accordion”.
Nếu bạn có đam mê và muốn theo đuổi nghề lập trình thiết kế website trên ngôn ngữ PHP MySQL, hãy đến với công ty Việt Tâm Đức, click chuột tham khảo khóa học chất lượng cao của công ty tại hình ảnh bên dưới:
Bài liên quan
