Meni harmonika: 4 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

Napravite meni za harmoniku na više nivoa koristeći samo HTML i CSS.

Iako za svoje projekte koristim Raspberry Pi, ovo može raditi na bilo kojem web serveru.

Umjesto pružanja primjera kako stvoriti određeni web element, cilj je imati predložak koji uključuje radne primjere svakog elementa koji se koristi u mojim projektima. Lakše je izmijeniti nešto što funkcionira, a zatim pokušati učiniti da to funkcionira.

Meni harmonika može se koristiti kao interfejs za Raspberry Pi uređaj putem računara, podloge ili mobilnog telefona. Dok koristim Raspberry Pi koji radi sa lighttpd -om, može se koristiti bilo koji hardver i web server.

Svaki projekt Raspberry Pi trebao bi imati sučelje. Zbog relativno male veličine ekrana, mobilni telefoni su najrestriktivniji. Meni harmonika zaobilazi ograničenja telefona proširivanjem (+) i skupljanjem (-) okomito dopuštajući onoliko stavki menija koliko je potrebno.

Na webu postoji mnogo primjera menija za harmoniku. Budući da mi se sviđa izgled i osjećaj OpenHAB-a ili OpenSprinklera, želio sam nešto slično.

Do sada su meniji mog projekta Raspberry Pi bili vrlo jednostavni. Nisam potrošio mnogo vremena na izgled i dojam. Većina mojih sučelja bila su napisana samo u HTML -u i nisu koristila CSS. Nisam dizajner korisničkog interfejsa i rad na izgledu je izvan moje zone udobnosti. Budući da ne radim često na web stranicama, naučio sam i zaboravio CSS više puta. Htio sam jednom napraviti izgled i osjećaj menija, ispraviti ga, a zatim ga ponovo koristiti.

U svojim aplikacijama meni je potreban za podršku:

• veze do drugih web stranica ili uređaja,
• prikaz vrijednosti ili statusa i
• dopustiti ažuriranje vrijednosti.

Posljednja dva zahtijevaju više od HTML -a i CSS -a.

Budući da unaprijed ne znam koliko će mi stavki menija trebati, meni za harmoniku omogućava fleksibilnost za proširenje menija prema potrebi.

Moji komentari u CSS-u i HTML-u mogu biti malo prekomjerni, ali mogu pogledati komentare i znati kako promijeniti jelovnik kako bih zadovoljio svoje potrebe bez ponovnog učenja CSS-a. Komentari mi takođe olakšavaju razumijevanje kako CSS utječe na HTML bez prevrtanja između njih.

Imao sam još nekoliko uslova:

• Ponekad moja kuća izgubi pristup internetu. Dakle, ne mogu imati sistem menija koji ovisi o vezama na vanjske web stranice, što uključuje vanjske fontove, API -je ili javascript
• Moja porodica ima eklektičan ukus računara i koristi iPhone, android, MAC, PC i iPad, tablete, kao i Chrome, Firefox, Safari i IE. Izbornik mora raditi na svim ovim

Proveo sam nekoliko sedmica isprobavajući različite implementacije menija za harmoniku. Uređujući ih, prilagođavajući ih i odustajući od njih. Web stranica, CSS Scripts, ima izbornik na više nivoa koji ispunjava sve moje zahtjeve i čini osnovu ovog uputstva.

Korak 1: Instalacija korak po korak

Otvorite prozor terminala na MacBook -u ili PC -u i pokrenite sljedeće naredbe:

Zamijenite stavke u ♣ s stvarnim vrijednostima.

Prijavite se na Raspberry Pi

$ ssh pi@♣ adresa malina-pi-ip ♣

Promijenite u glavni direktorij

$ cd /var /www

Preuzmite index.html i promijenite dozvole i vlasnika datoteke

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

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

Napravite direktorij za slike i premjestite se u taj direktorij

$ mkdir img

$ cd img

Preuzmite slike i promijenite vlasnika.

$ 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

Napravite sigurnosnu kopiju u glavnom direktoriju i kreirajte css direktorij i premjestite se u njega

$ cd..

$ mkdir css $ cd css

Preuzmite listu stilova i promijenite dozvole i vlasnika datoteke

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

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

Ako nemate maline pi, možete preuzeti ove datoteke na Mac ili PC. Za pokretanje menija sa Mac -a ili PC -a

• dvaput kliknite na index.html, ili
• odaberite index.html, kliknite desnim tasterom miša i otvorite pretraživačem po vašem izboru.

Ako koristite Raspberry Pi, mora imati pokrenut web server. Otvorite preglednik na računaru ili Macu, a u prozoru URL unesite:

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

Moj server zahtijeva sigurnu vezu (uklonite razmake oko dvotočke):

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

I radi!

Korak 2: Dodatak: Reference

• CSS skripta Meni na više nivoa harmonike koji koristi samo HTML i CSS
• W3Schools meni za harmoniku
• W3Schools CSS
• W3Schools HTML

Korak 3: Dodatak: Ažuriranja

Korak 4: Dodatak: Rješavanje problema

Evo nekoliko ideja koje bi mogle pomoći:

• Da biste formatirali HTML u php echo naredbama, dodajte "\ r" na kraju da biste unijeli povratni znak
• ID grupe za podmeni mora biti jedinstven. Ako id-pod-izbornika nije jedinstven, njegove stavke pod-izbornika bit će uključene u prvu instancu group-id-a