Menu a fisarmonica: 4 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Crea un menu a fisarmonica multilivello utilizzando solo HTML e CSS.

Mentre uso un Raspberry Pi per i miei progetti, questo può essere eseguito su qualsiasi server web.

Invece di fornire esempi su come creare un particolare elemento web, l'obiettivo è avere un modello che includa esempi funzionanti di ciascun elemento utilizzato nei miei progetti. È più facile modificare qualcosa che funziona, quindi provare a farlo funzionare.

Un menu a fisarmonica può essere utilizzato come interfaccia per un dispositivo Raspberry Pi tramite un computer, un pad o un telefono cellulare. Mentre utilizzo un Raspberry Pi con lighttpd, è possibile utilizzare qualsiasi hardware e server web.

Ogni progetto Raspberry Pi dovrebbe avere un'interfaccia. A causa delle dimensioni del display relativamente ridotte, i telefoni cellulari sono i più restrittivi. Un menu a fisarmonica aggira i limiti di un telefono espandendo (+) e comprimendo (-) verticalmente consentendo tutte le voci di menu necessarie.

Ci sono molti esempi di menu a fisarmonica sul web. Poiché mi piace l'aspetto di OpenHAB o OpenSprinkler, volevo qualcosa di simile.

Fino ad ora, i menu del mio progetto Raspberry Pi sono stati molto semplici. Non ho dedicato molto tempo al look-and-feel. La maggior parte delle mie interfacce era scritta solo in HTML e non usava CSS. Non sono un designer dell'interfaccia utente e lavorare sull'aspetto grafico è al di fuori della mia zona di comfort. Poiché non lavoro molto spesso sui siti Web, ho imparato e dimenticato i CSS più volte. Volevo rifare l'aspetto del menu una volta, farlo bene e poi riutilizzarlo.

Nelle mie applicazioni, ho bisogno che il menu supporti:

• collegamenti ad altri siti Web o dispositivi,
• visualizzare i valori o lo stato e
• consentire gli aggiornamenti ai valori.

Gli ultimi due richiedono più di HTML e CSS.

Poiché non so in anticipo, quante voci di menu avrò bisogno, un menu a fisarmonica consente la flessibilità di espandere il menu secondo necessità.

I miei commenti nel CSS e nell'HTML possono essere un po' esagerati, ma posso guardare i commenti e sapere come modificare il menu per soddisfare le mie esigenze senza riapprendere i CSS. I commenti mi rendono anche facile capire come il CSS influisce sull'HTML senza passare avanti e indietro tra i due.

Avevo altri requisiti:

• A volte la mia casa perde l'accesso a Internet. Quindi, non posso fare in modo che il sistema di menu dipenda da collegamenti a siti Web esterni, che includono caratteri esterni, API o javascript
• La mia famiglia ha gusti eclettici sui computer e usa iPhone, Android, MAC, PC e iPad, tablet, oltre a Chrome, Firefox, Safari e IE. Il menu deve funzionare su tutti questi

Ho passato un paio di settimane a provare varie implementazioni di menu a fisarmonica. Modificarli, adattarli e rinunciarvi. Il sito Web, CSS Scripts, ha un menu a più livelli che ha soddisfatto tutte le mie esigenze e costituisce la base di questa istruzione.

Passaggio 1: installazione passo passo

Apri la finestra del terminale su un MacBook o un PC ed esegui i seguenti comandi:

Sostituisci gli elementi in con i valori effettivi.

Accedi a Raspberry Pi

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

Passa alla directory principale

$ cd /var/www

Scarica index.html e modifica i permessi e il proprietario del file

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

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

Crea una directory per le immagini e spostati in quella directory

$ mkdir img

$ cd img

Scarica le immagini e cambia proprietario.

$ 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

Esegui il backup nella directory principale e crea la directory css e spostati in essa

$ cd..

$ mkdir css $ cd css

Scarica il foglio di stile e modifica i permessi e il proprietario del file

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

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

Se non hai un Raspberry Pi, puoi scaricare questi file su un Mac o PC. Per eseguire il menu da un Mac o da un PC, sia

• fare doppio clic su index.html, oppure
• seleziona index.html, fai clic con il pulsante destro del mouse e apri con il browser di tua scelta.

Se si utilizza un Raspberry Pi, deve essere in esecuzione un server Web. Apri un browser sul tuo PC o Mac e nella finestra dell'URL inserisci:

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

Il mio server richiede una connessione sicura (rimuovi gli spazi intorno ai due punti):

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

E funziona!

Fase 2: Appendice: Riferimenti

• Script CSS Menu a fisarmonica multilivello che utilizza solo HTML e CSS
• Menù fisarmonica W3Schools
• W3Schools CSS
• W3Schools HTML

Passaggio 3: Appendice: Aggiornamenti

Passaggio 4: Appendice: risoluzione dei problemi

Ecco alcune idee che potrebbero aiutare:

• Per formattare l'HTML nelle istruzioni echo php, aggiungi "\r" alla fine per inserire un carattere di ritorno
• L'ID di gruppo per un sottomenu deve essere univoco. Se l'id di gruppo di un sottomenu nonèunivoco allora le sue voci di sottomenu saranno incluse nella prima istanza di id di gruppo