Menu Accordion: 4 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:32

Tạo một menu accordion nhiều cấp chỉ sử dụng HTML và CSS.

Trong khi tôi sử dụng Raspberry Pi cho các dự án của mình, điều này có thể chạy trên bất kỳ máy chủ web nào.

Thay vì cung cấp các ví dụ về cách tạo một phần tử web cụ thể, mục tiêu là có một mẫu bao gồm các ví dụ làm việc của từng phần tử được sử dụng trong các dự án của tôi. Sẽ dễ dàng hơn khi sửa đổi thứ gì đó hoạt động, sau đó cố gắng làm cho nó hoạt động.

Menu accordion có thể được sử dụng làm giao diện cho thiết bị Raspberry Pi thông qua máy tính, pad hoặc điện thoại di động. Trong khi tôi sử dụng Raspberry Pi chạy lighttpd, có thể sử dụng bất kỳ phần cứng và máy chủ web nào.

Mỗi dự án Raspberry Pi nên có một giao diện. Do kích thước màn hình tương đối nhỏ nên điện thoại di động là hạn chế nhất. Menu accordion vượt qua giới hạn của điện thoại bằng cách mở rộng (+) và thu gọn (-) theo chiều dọc cho phép nhiều mục menu theo yêu cầu.

Có rất nhiều ví dụ về menu accordion trên web. Bởi vì tôi thích giao diện của OpenHAB hoặc OpenSprinkler, tôi muốn một cái gì đó tương tự.

Cho đến nay, các menu của dự án Raspberry Pi của tôi rất đơn giản. Tôi đã không dành nhiều thời gian cho giao diện. Hầu hết các giao diện của tôi chỉ được viết bằng HTML và không sử dụng CSS. Tôi không phải là nhà thiết kế giao diện người dùng và làm việc về giao diện nằm ngoài vùng an toàn của tôi. Bởi vì tôi không làm việc trên các trang web thường xuyên, tôi đã học và quên CSS nhiều lần. Tôi muốn xem lại menu một lần, làm đúng và sau đó sử dụng lại.

Trong các ứng dụng của mình, tôi cần menu để hỗ trợ:

• liên kết đến các trang web hoặc thiết bị khác,
• hiển thị giá trị hoặc trạng thái và
• cho phép cập nhật các giá trị.

Hai phần cuối yêu cầu nhiều hơn HTML và CSS.

Vì tôi không biết trước, tôi sẽ cần bao nhiêu món trong thực đơn, một menu accordion cho phép linh hoạt mở rộng menu theo yêu cầu.

Nhận xét của tôi trong CSS và HTML có thể hơi cao hơn một chút, nhưng tôi có thể xem các nhận xét và biết cách thay đổi menu để đáp ứng nhu cầu của mình mà không cần học lại CSS. Các nhận xét cũng giúp tôi dễ dàng hiểu cách CSS tác động đến HTML mà không cần lật qua lại giữa hai phần.

Tôi có một số yêu cầu khác:

• Đôi khi nhà tôi bị mất truy cập internet. Vì vậy, tôi không thể có hệ thống menu phụ thuộc vào các liên kết đến các trang web bên ngoài, bao gồm các phông chữ, API hoặc javascript bên ngoài
• Gia đình tôi có sở thích máy tính chiết trung và sử dụng iPhone, android, MAC, PC và iPad, máy tính bảng, cũng như chrome, firefox, safari và IE. Menu cần chạy trên tất cả

Tôi đã dành vài tuần để thử các cách triển khai menu accordion khác nhau. Chỉnh sửa chúng, điều chỉnh chúng và từ bỏ chúng. Trang web, CSS Scripts, có một menu nhiều cấp đáp ứng tất cả các yêu cầu của tôi và tạo thành nền tảng của hướng dẫn này.

Bước 1: Cài đặt từng bước

Mở cửa sổ terminal trên MacBook hoặc PC và chạy các lệnh sau:

Thay thế các mục trong ♣ bằng các giá trị thực tế.

Đăng nhập vào Raspberry Pi

$ ssh pi @ ♣ raspberry-pi-ip-address ♣

Thay đổi thành thư mục chính

$ cd / var / www

Tải xuống index.html và thay đổi quyền cũng như chủ sở hữu của tệp

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/index.html"

$ sudo chmod 774 index.html $ sudo chown pi index.html

Tạo một thư mục cho hình ảnh và chuyển vào thư mục đó

$ mkdir img

$ cd img

Tải xuống các hình ảnh và thay đổi chủ sở hữu.

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/tv.png"

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/menu-icon.png" $ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/ raspberry-pi.png "$ sudo chown pi *.png

Sao lưu vào thư mục chính và tạo thư mục css và chuyển vào đó

$ cd..

$ mkdir css $ cd css

Tải xuống biểu định kiểu và thay đổi quyền cũng như chủ sở hữu của tệp

$ sudo wget "https://raw.githubusercontent.com/dumbo25/accordion-menu/master/style.css"

$ sudo chmod 744 style.css $ sudo chown pi style.css

Nếu bạn không có pi raspberry, thì bạn có thể tải các tệp này xuống máy Mac hoặc PC. Để chạy menu từ Mac hoặc PC,

• nhấp đúp vào index.html hoặc
• chọn index.html, nhấp chuột phải và mở bằng trình duyệt bạn chọn.

Nếu sử dụng Raspberry Pi, nó phải đang chạy một máy chủ web. Mở trình duyệt trên PC hoặc Mac của bạn và trong cửa sổ URL, hãy nhập:

♣ raspberry-pi-ip-address ♣ / index.html

Máy chủ của tôi yêu cầu kết nối an toàn (xóa khoảng trắng xung quanh dấu hai chấm):

♣raspberry-pi-ip-address♣/index.html

Và nó hoạt động!

Bước 2: Phụ lục: Tài liệu tham khảo

• Tập lệnh CSS Menu accordion đa cấp chỉ sử dụng HTML và CSS
• Menu đàn accordion của W3Schools
• W3Schools CSS
• W3Schools HTML

Bước 3: Phụ lục: Cập nhật

Bước 4: Phụ lục: Khắc phục sự cố

Dưới đây là một số ý tưởng có thể hữu ích:

• Để định dạng HTML trong các câu lệnh php echo, hãy thêm "\ r" vào cuối để đặt một ký tự trả về
• Id nhóm cho menu phụ phải là duy nhất. Nếu id nhóm của menu phụ không phải là duy nhất thì các mục menu phụ của nó sẽ được đưa vào trường hợp đầu tiên của id nhóm