Accordion Navigation jQuery & CSS

• November 26, 2009
• 57 comments

Accordion menu cũng là một dạng menu phổ biến được sử dụng nhiều trong các website hiện đại. Nó tạo cảm giác “cool cool” khi người dùng click vào đường link. Hơn nữa nó cũng tiết kiệm được rất nhiều diện tích trên trang web. Nhưng Accordion không chỉ được sử dụng cho Menu, nó cũng có thể được sử dụng cho nội dung, hình ảnh.

Trong bài này tôi sẽ hướng dẫn bạn chi tiết cách tạo menu Accordion từ đầu. Nhưng tôi sẽ đơn giản phần CSS và HTML, chúng ta chỉ tập trung chủ yếu vào phần jQuery. Còn màu sắc, hoa lá cành v.v. thì bạn tự thêm vào sau cũng được. Thêm nữa tôi cũng muốn nói đây là markup bằng HTML, còn nếu bạn muốn sử dụng cho các Project web động bằng PHP chẳng hạn thì nó hoàn toàn tương thích. Miễn sao CMS đó có code HTML khi xuất ra giống với code mà chúng ta đã viết ở trong video dưới.

Thời lượng: 22:38

Download định dạng .avi chất lượng cao: MediaFire

File Size: 48 MB

Giải thích thêm về jQuery

Trong bài này chúng ta sử dụng một số function() của jQuery như: addClass(), removeClass(), hide(), slideUp() và slideDown(). Đây là những function() có sẵn của jQuery mà bạn chỉ cần sử dụng jQuery Selector và gán nó vào.

Để có thể sử dụng được jQuery trong trang web, bạn cần phải download jQuery từ trang chủ của jQuery hoặc sử dụng file có sẵn trên server của Google như sau:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Về cơ bản hiệu ứng Accordion hoạt động theo nguyên lý khi người dùng mới mở trang web, thì link đầu tiên được hiển thị còn các thành phần khác bị ẩn đi. Khi người dùng click chuột vào bất cứ link nào, nội dung của nó sẽ được hiển thị và các phần khác bị ẩn. Như vậy bạn có thể tưởng tượng rằng chúng ta phải sử dụng click Event Handler. Cuối cùng để đạt được hiệu ứng mũi tên thay đổi theo trạng thái thì mình dùng một class=’active’. Class này tất nhiên được thêm vào và bỏ đi tự động bằng jQuery.