Menu dọc cho một trang web ở dạng một accordion trên jQuery

Menu được biết đến là một phần của trang web. Điều hướng thú vị của tài nguyên Internet có thể thu hút du khách. Ngoài ra, một tài sản quan trọng của bất kỳ thực đơn nào là sự chặt chẽ của nó. Một menu đơn giản đơn giản dễ dàng được tạo ra bằng cách sử dụng HTML và CSS. Nhưng chúng tôi sẽ tiếp tục: học cách tạo một trình đơn accordion với jQuery.

Tạo menu - "accordion"

Trình đơn theo chiều dọc dưới dạng một chiếc đàn accordion là gì? Đây là một danh sách thả xuống tạo ra điều hướng thuận lợi và cho một cái nhìn phong cách vào trang web. Menu được thực hiện trong biểu mẫu này, cho phép bạn bao gồm nhiều tiểu mục. Truy cập chúng xảy ra khi bạn nhấp vào mục mong muốn. Ai đó sẽ nói rằng bạn có thể thực hiện một trình đơn đơn giản trong phong cách này mà không sử dụng jQuery. Vâng, đúng vậy. Nhưng đối tượng như vậy sẽ không tiện lợi cho chủ sở hữu máy tính bảng hoặc điện thoại thông minh. Hãy tạo một menu theo chiều dọc, hấp dẫn đối với mọi người. Sau đó, bằng cách thay đổi kiểu dáng màu sắc của điều hướng như vậy, sẽ có thể tùy chỉnh thiết kế cho bất kỳ trang web nào.

Mã HTML

Vì vậy, để tạo trình đơn dọc của chúng tôi, trước tiên bạn cần nhập mã HTML, sẽ bao gồm các dòng sau:

Lưu mã này trong một tệp có tên Accord_menu.html.

Như bạn thấy, chúng tôi đã tạo một danh sách không có thứ tự. Nó bao gồm 3 điểm chính:

- hình ảnh;

- Phim ảnh;

- sách.

Mỗi mục có một số tiểu mục. Trường hợp có #, bạn sẽ cần thêm liên kết. Bây giờ điều quan trọng là mô tả các phong cách. Tất cả phụ thuộc vào nguồn tài nguyên Internet của bạn trông như thế nào. Trình đơn theo chiều dọc cho trang web phải hài hòa phù hợp với thiết kế của nó.

CSS

Với phong cách, bạn không nên có bất kỳ khó khăn. Chúng ta chỉ lưu ý rằng trong ví dụ này, một gradient điền được sử dụng. Dưới đây là cách CSS trông:

Tệp CSS xác định màu sắc, kích thước, các điểm đánh dấu được xóa ở bên trái của các mục danh sách. Nó được xác định như thế nào mỗi điểm và phụ menu sẽ hành xử khi bạn di chuột qua nó. Ví dụ:

# E1fee2 là màu xanh lá cây ánh sáng của điểm phụ.

# C4f0f7 là màu sắc tinh vi của các điểm phụ khi bạn di chuột qua chúng.

Thuộc tính hiển thị được thiết lập để chặn để điều chỉnh indent và kích thước cần thiết. Màu sắc, kích thước, kiểu chữ, vị trí - tất cả điều này cũng mô tả trong tệp CSS. Đặt tên cho nó, ví dụ, accordionmenu_my1.css.

Kết nối jQuery để cải tiến menu

Như bạn nhớ, mục tiêu của chúng tôi là tạo trình đơn jQuery dọc. Nếu bạn là người mới sử dụng công nghệ này, đừng nản chí. Sử dụng kho của Google và kết nối tập lệnh jQuery. Điều này sẽ làm cho trình đơn hấp dẫn hơn. JQuery là một thư viện JavaScript dựa trên sự tương tác của đánh dấu siêu văn bản HTML và JavaScript. JQuery cho phép bạn truy cập vào các nội dung và thuộc tính của các phần tử.

Vì vậy, chúng ta kết nối các kịch bản cần thiết trong cơ thể của tập tin HTML và thiết lập các quy tắc để lưu trữ 2 biến, trừ nhảy của các yếu tố. Chúng tôi tạo mã để đóng các tab khác khi bạn mở một tab bằng cách nhấp chuột. Đây là cách nó trông:

Lưu tất cả các thay đổi, nhìn vào trình đơn trông như thế nào trong trình duyệt. Đây là kết quả tổng thể của tác phẩm: Kết quả là, chúng tôi sẽ có một menu hấp dẫn, mà luôn luôn có thể được thay đổi tùy thuộc vào sở thích của bạn. Và bằng cách thu thập kiến thức mới trong lĩnh vực jQuery, CSS, bạn sẽ tạo ra các yếu tố độc đáo của trang web, nâng cao kỹ năng thực hành của bạn.