Harmonika -menu: 4 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Opret en harmonika-menu på flere niveauer ved hjælp af kun HTML og CSS.

Mens jeg bruger en Raspberry Pi til mine projekter, kan dette køre på enhver webserver.

I stedet for at give eksempler på, hvordan man opretter et bestemt webelement, er målet at have en skabelon, der indeholder arbejdseksempler for hvert element, der bruges i mine projekter. Det er lettere at ændre noget, der virker, og derefter forsøge at få det til at fungere.

En harmonika -menu kan bruges som grænseflade til en Raspberry Pi -enhed via en computer, pad eller mobiltelefon. Mens jeg bruger en Raspberry Pi, der kører lighttpd, kan enhver hardware og webserver bruges.

Hvert Raspberry Pi -projekt skal have en grænseflade. På grund af sin relativt lille skærmstørrelse er mobiltelefoner de mest restriktive. En harmonika-menu kommer uden om telefonens grænser ved at udvide (+) og kollapse (-) lodret, så mange menupunkter efter behov tillades.

Der er mange eksempler på harmonika -menuer på nettet. Fordi jeg kan lide udseendet og følelsen af OpenHAB eller OpenSprinkler, ville jeg gerne have noget lignende.

Indtil nu har mit Raspberry Pi -projekts menuer været meget enkle. Jeg brugte ikke meget tid på look-and-feel. De fleste af mine grænseflader blev kun skrevet i HTML og brugte ingen CSS. Jeg er ikke en UI-designer og arbejder på look-and-feel er uden for min komfortzone. Fordi jeg ikke arbejder på websteder særlig ofte, har jeg lært og glemt CSS flere gange. Jeg ønskede at få menuen til at se ud og føles en gang, få det rigtigt og derefter genbruge det.

I mine applikationer har jeg brug for menuen til at understøtte:

• links til andre websteder eller enheder,
• vise værdier eller status og
• tillade opdateringer af værdier.

De to sidste kræver mere end HTML og CSS.

Da jeg ikke på forhånd ved, hvor mange menupunkter jeg skal bruge, giver en harmonika -menu fleksibiliteten til at udvide menuen efter behov.

Mine kommentarer i CSS og HTML er muligvis en smule overdrevne, men jeg kan se på kommentarerne og vide, hvordan jeg ændrer menuen for at imødekomme mine behov uden at genlære CSS. Kommentarerne gør det også let for mig at forstå, hvordan CSS påvirker HTML uden at vende frem og tilbage mellem de to.

Jeg havde et par andre krav:

• Nogle gange mister mit hus internetadgang. Så jeg kan ikke få menusystemet til at afhænge af links til eksterne websteder, som indeholder eksterne skrifttyper, API'er eller javascript
• Min familie har eklektisk computersmag og bruger iPhone, android, MAC'er, PC og iPads, tablets samt krom, firefox, safari og IE. Menuen skal køre på alle disse

Jeg brugte et par uger på at afprøve forskellige implementeringer af harmonika -menu. Redigere dem, tilpasse dem og opgive dem. Webstedet, CSS Scripts, har en menu på flere niveauer, der opfyldte alle mine krav og danner grundlag for denne instruerbare.

Trin 1: Trin-for-trin installation

Åbn terminalvindue på en MacBook eller PC, og kør følgende kommandoer:

Erstat emner i with er med faktiske værdier.

Log ind på Raspberry Pi

$ ssh pi@♣ hindbær-pi-ip-adresse ♣

Skift til hovedmappe

$ cd /var /www

Download index.html, og skift tilladelser og ejer af filen

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

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

Opret et bibliotek til billeder, og flyt ind i det bibliotek

$ mkdir img

$ cd img

Download billederne og skift ejer.

$ 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/ hindbær-pi-p.webp

Sikkerhedskopier til hovedmappen, og opret css -biblioteket og gå ind i den

$ cd..

$ mkdir css $ cd css

Download typografiarket, og skift tilladelser og ejer af filen

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

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

Hvis du ikke har en hindbær pi, kan du downloade disse filer til en Mac eller PC. For at køre menuen fra en Mac eller PC, enten

• dobbeltklik på index.html eller
• vælg index.html, højreklik, og åbn med den browser, du ønsker.

Hvis du bruger en Raspberry Pi, skal den køre en webserver. Åbn en browser på din pc eller Mac, og indtast i URL -vinduet:

♣ hindbær-pi-ip-adresse ♣/index.html

Min server kræver en sikker forbindelse (fjern mellemrum omkring tyktarmen):

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

Og det virker!

Trin 2: Tillæg: Referencer

• CSS -script Multilevel harmonika menu, der kun bruger HTML og CSS
• W3Schools harmonika menu
• W3Schools CSS
• W3Schools HTML

Trin 3: Tillæg: Opdateringer

Trin 4: Tillæg: Fejlfinding

Her er nogle ideer, der kan hjælpe:

• For at formatere HTML i php -ekko -sætninger skal du tilføje "\ r" i slutningen for at indtaste et returtegn
• Gruppens id for en undermenu skal være unikt. Hvis en undermenu's gruppe-id ikke er unikt, vil dens undermenuelementer blive inkluderet i første instans af gruppe-id