Аккордеонное меню: 4 шага

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-13 06:58

Создайте многоуровневое аккордеонное меню, используя только HTML и CSS.

Хотя я использую Raspberry Pi для своих проектов, он может работать на любом веб-сервере.

Вместо того, чтобы предоставлять примеры того, как создать конкретный веб-элемент, цель состоит в том, чтобы иметь шаблон, включающий рабочие примеры каждого элемента, используемого в моих проектах. Легче изменить то, что работает, а затем попытаться заставить это работать.

Аккордеонное меню можно использовать в качестве интерфейса для устройства Raspberry Pi через компьютер, планшет или мобильный телефон. Хотя я использую Raspberry Pi с запущенным lighttpd, можно использовать любое оборудование и веб-сервер.

У каждого проекта Raspberry Pi должен быть интерфейс. Из-за относительно небольшого размера дисплея мобильные телефоны являются наиболее ограничивающими. Аккордеонное меню позволяет обойти ограничения телефона, разворачиваясь (+) и сворачивая (-) по вертикали, позволяя использовать столько пунктов меню, сколько требуется.

В сети есть много примеров меню-гармошек. Поскольку мне нравится внешний вид OpenHAB или OpenSprinkler, я хотел что-то подобное.

До сих пор меню моего проекта Raspberry Pi было очень простым. Я не тратил много времени на внешний вид. Большинство моих интерфейсов были написаны только на HTML и не использовали CSS. Я не дизайнер пользовательского интерфейса, и работа над внешним видом выходит за рамки моей зоны комфорта. Поскольку я нечасто работаю над веб-сайтами, я выучил и забыл CSS несколько раз. Я хотел однажды сделать меню более удобным, а затем использовать его повторно.

В моих приложениях мне нужно, чтобы меню поддерживало:

• ссылки на другие веб-сайты или устройства,
• отображать значения или статус и
• разрешить обновление значений.

Последние два требуют большего, чем HTML и CSS.

Так как я заранее не знаю, сколько пунктов меню мне понадобится, аккордеонное меню позволяет гибко расширять меню по мере необходимости.

Мои комментарии в CSS и HTML могут быть немного чрезмерными, но я могу смотреть на комментарии и знать, как изменить меню в соответствии со своими потребностями, не изучая заново CSS. Комментарии также помогают мне понять, как CSS влияет на HTML, не переключаясь между ними.

У меня было еще несколько требований:

• Иногда мой дом теряет доступ в Интернет. Итак, я не могу, чтобы система меню зависела от ссылок на внешние веб-сайты, которые включают внешние шрифты, API или javascript.
• Моя семья имеет эклектичный компьютерный вкус и использует iPhone, Android, MAC, ПК и iPad, планшеты, а также Chrome, Firefox, Safari и IE. Меню должно работать на всех этих

Я потратил пару недель на пробу различных реализаций аккордеонного меню. Редактировать их, адаптировать и отказываться от них. На веб-сайте CSS Scripts есть многоуровневое меню, которое отвечает всем моим требованиям и составляет основу этого руководства.

Шаг 1. Пошаговая установка

Откройте окно терминала на MacBook или ПК и выполните следующие команды:

Замените элементы в ♣ фактическими значениями.

Войдите в Raspberry Pi

$ ssh pi @ ♣ raspberry-pi-ip-адрес ♣

Перейти в основной каталог

$ cd / var / www

Загрузите index.html и измените права доступа и владельца файла.

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

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

Создайте каталог для изображений и перейдите в этот каталог.

$ mkdir img

$ cd img

Скачайте изображения и смените владельца.

$ 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-p.webp

Сделайте резервную копию в основной каталог, создайте каталог css и перейдите в него

$ cd..

$ mkdir css $ cd css

Загрузите таблицу стилей и измените права доступа и владельца файла.

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

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

Если у вас нет Raspberry Pi, вы можете загрузить эти файлы на Mac или ПК. Чтобы запустить меню с Mac или ПК, либо

• дважды щелкните index.html или
• выберите index.html, щелкните правой кнопкой мыши и откройте в любом браузере.

Если вы используете Raspberry Pi, на нем должен быть запущен веб-сервер. Откройте браузер на своем ПК или Mac и в окне URL введите:

♣ малина-пи-ip-адрес ♣ / index.html

Моему серверу требуется безопасное соединение (удалите пробелы вокруг двоеточия):

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

И это работает!

Шаг 2: Приложение: ссылки

• CSS-скрипт Многоуровневое аккордеонное меню с использованием только HTML и CSS
• Аккордеонное меню W3Schools
• W3Schools CSS
• W3Schools HTML

Шаг 3: Приложение: обновления

Шаг 4: Приложение: Устранение неполадок

Вот несколько идей, которые могут помочь:

• Чтобы отформатировать HTML в операторах php echo, добавьте "\ r" в конце, чтобы вставить символ возврата.
• Идентификатор группы для подменю должен быть уникальным. Если идентификатор группы подменю не уникален, то его элементы подменю будут включены в первый экземпляр идентификатора группы.