Меню акордеон: 4 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

Създайте многостепенно меню за акордеон, използвайки само 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, PC и 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

Ако нямате малинов пи, можете да изтеглите тези файлове на Mac или компютър. За да стартирате менюто от Mac или PC също

• щракнете двукратно върху index.html или
• изберете index.html, щракнете с десния бутон и отворете с браузъра по ваш избор.

Ако използвате Raspberry Pi, той трябва да работи с уеб сървър. Отворете браузър на вашия компютър или Mac и в прозореца с URL адрес въведете:

♣ raspberry-pi-ip-адрес ♣/index.html

Моят сървър изисква защитена връзка (премахнете интервалите около двоеточието):

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

И работи!

Стъпка 2: Приложение: Препратки

• CSS скрипт Многостепенно меню за акордеон, използващо само HTML и CSS
• Меню за акордеон W3Schools
• W3Schools CSS
• W3Schools HTML

Стъпка 3: Приложение: Актуализации

Стъпка 4: Приложение: Отстраняване на неизправности

Ето някои идеи, които биха могли да помогнат:

• За да форматирате HTML в php echo изявления, добавете „\ r“в края, за да поставите знак за връщане
• Идентификаторът на група за подменю трябва да бъде уникален. Ако group-id на подменю не е уникален, неговите елементи от подменюто ще бъдат включени в първия екземпляр на group-id