Trekkspillmeny: 4 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

Lag en trekkspillmeny på flere nivåer med bare HTML og CSS.

Mens jeg bruker en Raspberry Pi til prosjektene mine, kan dette kjøres på hvilken som helst webserver.

I stedet for å gi eksempler på hvordan du lager et bestemt webelement, er målet å ha en mal som inneholder arbeidseksempler på hvert element som brukes i prosjektene mine. Det er lettere å endre noe som fungerer, og deretter prøve å få det til å fungere.

En trekkspillmeny kan brukes som grensesnitt til en Raspberry Pi -enhet via en datamaskin, pute eller mobiltelefon. Mens jeg bruker en Raspberry Pi som kjører lighttpd, kan hvilken som helst maskinvare og webserver brukes.

Hvert Raspberry Pi -prosjekt bør ha et grensesnitt. På grunn av den relativt lille skjermstørrelsen er mobiltelefoner de mest restriktive. En trekkspillmeny kommer rundt telefonens grenser ved å utvide (+) og kollapse (-) vertikalt slik at så mange menyelementer som nødvendig.

Det er mange eksempler på trekkspillmenyer på nettet. Fordi jeg liker utseendet til OpenHAB eller OpenSprinkler, ønsket jeg noe lignende.

Hittil har menyene til Raspberry Pi -prosjektet mitt vært veldig enkle. Jeg brukte ikke mye tid på utseendet. De fleste av grensesnittene mine ble skrevet bare i HTML og brukte ingen CSS. Jeg er ikke en UI-designer og jobber med utseende og følelse er utenfor min komfortsone. Fordi jeg ikke jobber på nettsteder veldig ofte, har jeg lært og glemt CSS flere ganger. Jeg ønsket å få menyen til å se og føle en gang, få den riktig og deretter bruke den på nytt.

I applikasjonene mine trenger jeg menyen for å støtte:

• lenker til andre nettsteder eller enheter,
• vise verdier eller status og
• tillate oppdateringer av verdier.

De to siste krever mer enn HTML og CSS.

Siden jeg ikke vet på forhånd, hvor mange menyelementer jeg trenger, gir en trekkspillmeny fleksibiliteten til å utvide menyen etter behov.

Kommentarene mine i CSS og HTML kan være litt over toppen, men jeg kan se på kommentarene og vite hvordan jeg endrer menyen for å dekke mine behov uten å lære CSS på nytt. Kommentarene gjør det også enkelt for meg å forstå hvordan CSS påvirker HTML uten å bla frem og tilbake mellom de to.

Jeg hadde noen andre krav:

• Noen ganger mister huset mitt internett. Så jeg kan ikke la menysystemet være avhengig av lenker til eksterne nettsteder, som inkluderer eksterne fonter, APIer eller javascript
• Familien min har eklektisk datamaskin og bruker iPhone, android, MAC, PC og iPads, nettbrett, samt krom, firefox, safari og IE. Menyen må kjøres på alle disse

Jeg brukte et par uker på å prøve ut forskjellige implementeringer av trekkspillmenyer. Redigere dem, tilpasse dem og gi opp. Nettstedet, CSS Scripts, har en meny på flere nivåer som oppfyller alle mine krav og danner grunnlaget for denne instruerbare.

Trinn 1: Trinn-for-trinn-installasjon

Åpne terminalvinduet på en MacBook eller PC og kjør følgende kommandoer:

Erstatt elementene i with er med faktiske verdier.

Logg inn på Raspberry Pi

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

Bytt til hovedkatalog

$ cd /var /www

Last ned index.html, og endre tillatelser og eier av filen

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

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

Lag en katalog for bilder og gå til den katalogen

$ mkdir img

$ cd img

Last ned bildene og bytt eier.

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

Sikkerhetskopier til hovedkatalogen, og opprett css -katalogen og gå inn i den

$ cd..

$ mkdir css $ cd css

Last ned stilarket, og endre tillatelser og eier av 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 bringebær pi, kan du laste ned disse filene til en Mac eller PC. For å kjøre menyen fra en Mac eller PC, enten

• dobbeltklikk på index.html eller
• velg index.html, høyreklikk og åpne med nettleseren du ønsker.

Hvis du bruker en Raspberry Pi, må den kjøre en webserver. Åpne en nettleser på din PC eller Mac, og skriv inn i URL -vinduet:

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

Serveren min krever en sikker tilkobling (fjern mellomrom rundt tykktarmen):

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

Og det fungerer!

Trinn 2: Vedlegg: Referanser

• CSS -script Multilevel trekkspillmeny som bare bruker HTML og CSS
• W3Schools trekkspillmeny
• W3Schools CSS
• W3Schools HTML

Trinn 3: Vedlegg: Oppdateringer

Trinn 4: Vedlegg: Feilsøking

Her er noen ideer som kan hjelpe:

• For å formatere HTML i php echo -setninger, legg til "\ r" på slutten for å sette inn et returtegn
• Gruppe-ID for en undermeny må være unik. Hvis gruppe-ID-en til en undermeny ikke er unik, vil undermenyelementene bli inkludert i første forekomst av gruppe-ID