Harmonikarski meni: 4 koraki

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:04

Ustvarite večstopenjski meni harmonike z uporabo samo HTML in CSS.

Medtem ko za svoje projekte uporabljam Raspberry Pi, se to lahko izvaja na katerem koli spletnem strežniku.

Namesto da bi podali primere, kako ustvariti določen spletni element, je cilj imeti predlogo, ki vključuje delovne primere vsakega elementa, uporabljenega v mojih projektih. Lažje spremenite nekaj, kar deluje, nato pa ga poskušate spraviti v delo.

Meni za harmoniko lahko uporabite kot vmesnik za napravo Raspberry Pi prek računalnika, blazinice ali mobilnega telefona. Medtem ko uporabljam Raspberry Pi z izvajanjem lighttpd, je mogoče uporabiti katero koli strojno opremo in spletni strežnik.

Vsak projekt Raspberry Pi mora imeti vmesnik. Mobilni telefoni so zaradi relativno majhne velikosti zaslona najbolj omejujoči. Meni harmonike presega omejitve telefona tako, da navpično razširi (+) in zruši (-), kar omogoča toliko elementov menija, kot je potrebno.

Na spletu je veliko primerov menijev za harmoniko. Ker mi je všeč videz OpenHAB ali OpenSprinkler, sem si želel nekaj podobnega.

Doslej so bili meniji mojega projekta Raspberry Pi zelo preprosti. Nisem porabil veliko časa za videz in občutek. Večina mojih vmesnikov je bila napisana samo v HTML -ju in ni uporabljala CSS. Nisem oblikovalec uporabniškega vmesnika in delo na videzu in občutku je zunaj moje cone udobja. Ker na spletnih mestih ne delam pogosto, sem se CSS večkrat naučil in pozabil. Želel sem si enkrat narediti videz in občutek menija, ga popraviti in ga nato znova uporabiti.

V svojih aplikacijah potrebujem meni za podporo:

• povezave do drugih spletnih mest ali naprav,
• prikaz vrednosti ali stanja in
• dovolite posodobitve vrednosti.

Zadnja dva zahtevata več kot HTML in CSS.

Ker vnaprej ne vem, koliko elementov menija bom potreboval, meni s harmoniko omogoča prilagodljivost razširitve menija po potrebi.

Moji komentarji v CSS in HTML so morda nekoliko previsoki, vendar si lahko ogledam komentarje in vem, kako spremeniti meni, da bom ustrezal svojim potrebam, ne da bi se znova učil CSS. Komentarji mi tudi olajšajo razumevanje, kako CSS vpliva na HTML, ne da bi se obrnil naprej in nazaj.

Imel sem še nekaj drugih zahtev:

• Včasih moja hiša izgubi dostop do interneta. Zato ne morem imeti sistema menija odvisnega od povezav do zunanjih spletnih mest, ki vključujejo zunanje pisave, API -je ali javascript
• Moja družina ima eklektičen računalniški okus in uporablja iPhone, android, MAC, PC in iPad, tablične računalnike, pa tudi krom, firefox, safari in IE. Meni mora teči na vseh teh

Nekaj tednov sem preizkušal različne izvedbe jedilnikov na harmoniki. Urejanje, prilagajanje in odrekanje. Spletno mesto CSS Scripts ima meni na več ravneh, ki izpolnjuje vse moje zahteve in je osnova tega navodila.

Korak: Namestite korak za korakom

Odprite terminalsko okno na MacBooku ali osebnem računalniku in zaženite naslednje ukaze:

Elemente v ♣ zamenjajte z dejanskimi vrednostmi.

Prijavite se v Raspberry Pi

$ ssh pi@♣ naslov maline-pi-ip ♣

Preklopite v glavni imenik

$ cd /var /www

Prenesite index.html in spremenite dovoljenja ter lastnika datoteke

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

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

Naredite imenik za slike in se premaknite v ta imenik

$ mkdir img

$ cd img

Prenesite slike in spremenite lastnika.

$ 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

Varnostno kopirajte v glavni imenik in ustvarite imenik css ter se premaknite vanj

$ cd..

$ mkdir css $ cd css

Prenesite slogovni list ter spremenite dovoljenja in lastnika datoteke

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

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

Če nimate maline pi, lahko te datoteke naložite na Mac ali PC. Za zagon menija iz računalnika Mac ali PC

• dvokliknite index.html ali
• izberite index.html, z desno tipko miške kliknite in odprite z brskalnikom po vaši izbiri.

Če uporabljate Raspberry Pi, mora imeti nameščen spletni strežnik. Odprite brskalnik v računalniku ali računalniku Mac in v oknu URL vnesite:

♣ naslov maline-pi-ip ♣/index.html

Moj strežnik zahteva varno povezavo (odstranite presledke okoli dvopičja):

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

In deluje!

2. korak: Dodatek: Reference

• CSS skript Večstopenjski meni harmonike z uporabo samo HTML in CSS
• Meni harmonike W3Schools
• W3Schools CSS
• W3Schools HTML

3. korak: Dodatek: Posodobitve

4. korak: Dodatek: Odpravljanje težav

Tu je nekaj idej, ki bi lahko pomagale:

• Če želite oblikovati HTML v stavkih php echo, dodajte "\ r" na koncu, da vnesete povratni znak
• ID skupine za podmeni mora biti edinstven. Če ID skupine podmenijev ni edinstven, bodo njegovi elementi podmenija vključeni v prvi primerek ID-ja skupine