Menú Acordió: 4 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

Creeu un menú d’acordió de diversos nivells amb només HTML i CSS.

Tot i que faig servir un Raspberry Pi per als meus projectes, això pot funcionar en qualsevol servidor web.

En lloc de proporcionar exemples de com crear un element web concret, l'objectiu és tenir una plantilla que inclogui exemples de treball de cada element utilitzat en els meus projectes. És més fàcil modificar alguna cosa que funcioni i intentar que funcioni.

Un menú d'acordió es pot utilitzar com a interfície d'un dispositiu Raspberry Pi mitjançant un ordinador, un pad o un telèfon mòbil. Tot i que faig servir un Raspberry Pi amb lighttpd, es pot utilitzar qualsevol maquinari i servidor web.

Tots els projectes de Raspberry Pi haurien de tenir una interfície. A causa de la seva mida de visualització relativament petita, els telèfons mòbils són els més restrictius. Un menú d’acordió supera els límits d’un telèfon expandint (+) i replegant (-) verticalment, permetent tants ítems de menú com calgui.

Al web hi ha molts exemples de menús d’acordió. Com que m'agrada l'aparença d'OpenHAB o OpenSprinkler, volia una cosa similar.

Fins ara, els menús del meu projecte Raspberry Pi eren molt senzills. No vaig passar molt de temps en l’aspecte i la sensació. La majoria de les meves interfícies s’escrivien només en HTML i no utilitzaven CSS. No sóc dissenyador d’interfície d’usuari i treballo en l’aspecte i la sensació fora de la meva zona de confort. Com que no treballo molt sovint als llocs web, he après i oblidat CSS diverses vegades. Volia fer una aparença del menú una vegada, encertar-lo i després tornar-lo a utilitzar.

A les meves aplicacions, necessito el menú per donar suport:

• enllaços a altres llocs web o dispositius,
• mostrar valors o estat i
• permetre actualitzacions de valors.

Els dos darrers requereixen més que HTML i CSS.

Com que no sé per endavant, quants elements de menú necessitaré, un menú d’acordió permet la flexibilitat d’ampliar el menú segons sigui necessari.

Els meus comentaris a CSS i HTML poden ser una mica superiors, però puc mirar-los i saber com canviar el menú per satisfer les meves necessitats sense tornar a aprendre CSS. Els comentaris també em faciliten la comprensió de com afecta el CSS a l’HTML sense moure’s d’anada i tornada entre els dos.

Tenia alguns altres requisits:

• De vegades, casa meva perd accés a Internet. Per tant, no puc fer que el sistema de menús depengui d’enllaços a llocs web externs, que incloguin tipus de lletra externs, API o javascript
• La meva família té un gust eclèctic d’ordinadors i fa servir iPhone, Android, MAC, PC i iPad, tauletes, així com Chrome, Firefox, Safari i IE. Cal que el menú s’executi en tots aquests aspectes

Vaig passar un parell de setmanes provant diverses implementacions de menú d’acordió. Editar-los, adaptar-los i renunciar-hi. El lloc web, CSS Scripts, té un menú de diversos nivells que compleix tots els meus requisits i constitueix la base d’aquest instructiu.

Pas 1: Instal·lació pas a pas

Obriu la finestra del terminal en un MacBook o PC i executeu les ordres següents:

Substitueix els elements de ♣ per valors reals.

Inicieu la sessió a Raspberry Pi

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

Canvieu al directori principal

$ cd / var / www

Baixeu index.html i canvieu els permisos i el propietari del fitxer

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

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

Feu un directori per a imatges i passeu-hi

$ mkdir img

$ cd img

Baixeu-vos les imatges i canvieu de propietari.

$ 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

Feu una còpia de seguretat al directori principal i creeu-lo i passeu-hi

$ cd..

$ mkdir css $ cd css

Baixeu-vos el full d'estil i canvieu els permisos i el propietari del fitxer

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

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

Si no teniu un raspberry pi, podeu descarregar aquests fitxers a un Mac o PC. Per executar el menú des d’un Mac o PC, qualsevol

• feu doble clic a index.html o bé
• seleccioneu index.html, feu clic amb el botó dret i obriu-lo amb el navegador que trieu.

Si utilitzeu un Raspberry Pi, ha d’executar un servidor web. Obriu un navegador al vostre PC o Mac i, a la finestra d’URL, introduïu:

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

El meu servidor requereix una connexió segura (elimineu els espais al voltant dels dos punts):

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

I funciona!

Pas 2: Apèndix: Referències

• Script CSS Menú d’acordió multinivell que utilitza només HTML i CSS
• Menú d’acordió de W3Schools
• W3Schools CSS
• W3Schools HTML

Pas 3: Apèndix: actualitzacions

Pas 4: Apèndix: resolució de problemes

Aquí teniu algunes idees que us poden ajudar:

• Per formatar HTML en declaracions de ressò php, afegiu "\ r" al final per posar un caràcter de retorn
• L'identificador de grup d'un submenú ha de ser únic. Si l'identificador de grup d'un submenú no és únic, els elements del submenú s'inclouran en la primera instància de l'identificador de grup