Menyja e fizarmonikës: 4 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:17

Krijoni një menu fizarmonike me shumë nivele duke përdorur vetëm HTML dhe CSS.

Ndërsa përdor Raspberry Pi për projektet e mia, kjo mund të funksionojë në çdo server në internet.

Në vend që të jap shembuj se si të krijoj një element të veçantë të uebit, qëllimi është që të ketë një model që përfshin shembuj pune të secilit element të përdorur në projektet e mia. Easiershtë më e lehtë të modifikosh diçka që funksionon, pastaj të përpiqesh ta vësh në punë.

Një menu fizarmonike mund të përdoret si një ndërfaqe për një pajisje Raspberry Pi përmes një kompjuteri, blloku ose telefoni celular. Ndërsa përdor një Raspberry Pi që funksionon lighttpd, çdo pajisje dhe server në internet mund të përdoret.

Çdo projekt Raspberry Pi duhet të ketë një ndërfaqe. Për shkak të madhësisë relativisht të vogël të ekranit, telefonat celularë janë më kufizuesit. Një menu fizarmonike arrin kufijtë e një telefoni duke zgjeruar (+) dhe duke u shembur (-) vertikalisht duke lejuar sa më shumë artikuj të menusë sa të kërkohet.

Ka shumë shembuj të menutë fizarmonikë në internet. Meqenëse më pëlqen pamja dhe ndjenja e OpenHAB ose OpenSprinkler, doja diçka të ngjashme.

Deri tani, menutë e projektit tim Raspberry Pi kanë qenë shumë të thjeshta. Nuk kalova shumë kohë në pamjen dhe ndjesinë. Shumica e ndërfaqeve të mia janë shkruar vetëm në HTML dhe nuk kanë përdorur CSS. Unë nuk jam një stilist UI dhe puna në pamjen dhe ndjenjën është jashtë zonës sime të rehatisë. Për shkak se nuk punoj shumë shpesh në uebfaqe, kam mësuar dhe harruar CSS shumë herë. Doja ta bëja menunë të dukshme dhe të ndjerë një herë, ta kuptoja dhe pastaj ta ripërdore.

Në aplikimet e mia, kam nevojë për menunë për të mbështetur:

• lidhje me uebfaqe ose pajisje të tjera,
• shfaq vlerat ose statusin dhe
• lejoni përditësime të vlerave.

Dy të fundit kërkojnë më shumë se HTML dhe CSS.

Meqenëse nuk e di paraprakisht, sa artikuj të menusë do të më duhen, një menu fizarmonike lejon fleksibilitetin për të zgjeruar menunë sipas kërkesës.

Komentet e mia në CSS dhe HTML mund të jenë pak më lart, por unë mund t'i shikoj komentet dhe të di se si të ndryshoj menunë për të përmbushur nevojat e mia pa mësuar përsëri CSS. Komentet gjithashtu e bëjnë më të lehtë për mua të kuptoj se si CSS ndikon në HTML pa u kthyer mbrapsht midis tyre.

Kisha disa kërkesa të tjera:

• Ndonjëherë shtëpia ime humbet qasjen në internet. Pra, nuk mund të kem që sistemi i menusë të varet nga lidhjet me faqet e internetit të jashtme, i cili përfshin shkronja të jashtme, API ose javascript
• Familja ime ka shije eklektike të kompjuterit dhe përdor iPhone, android, MAC, PC dhe iPad, tableta, si dhe, krom, firefox, safari dhe IE. Menyja duhet të funksionojë në të gjitha këto

Kam kaluar disa javë duke provuar zbatime të ndryshme të menysë fizarmonikë. Redaktimi i tyre, përshtatja dhe heqja dorë prej tyre. Faqja e internetit, Scripts CSS, ka një menu me shumë nivele që plotësoi të gjitha kërkesat e mia dhe formon bazën e këtij udhëzimi.

Hapi 1: Instaloni hap pas hapi

Hapni dritaren e terminalit në një MacBook ose PC dhe ekzekutoni komandat e mëposhtme:

Zëvendësoni artikujt në ♣'s me vlerat aktuale.

Hyni në Raspberry Pi

$ ssh pi@♣ mjedër-pi-ip-adresa

Kaloni në drejtorinë kryesore

$ cd /var /www

Shkarkoni index.html dhe ndryshoni lejet dhe pronarin e skedarit

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

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

Krijoni një drejtori për imazhet dhe futuni në atë drejtori

$ mkdir img

$ cd img

Shkarkoni imazhet dhe ndryshoni pronarin.

$ 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

Krijoni kopje rezervë në drejtorinë kryesore dhe krijoni drejtorinë css dhe futuni në të

cd $..

$ mkdir css $ cd css

Shkarkoni fletën e stilit dhe ndryshoni lejet dhe pronarin e skedarit

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

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

Nëse nuk keni një pi mjedër, atëherë mund t'i shkarkoni këto skedarë në një Mac ose PC. Për të ekzekutuar menunë nga një Mac ose PC

• klikoni dy herë mbi index.html, ose
• zgjidhni index.html, klikoni me të djathtën dhe hapeni me shfletuesin që keni zgjedhur.

Nëse përdorni Raspberry Pi, duhet të ketë një server në internet. Hapni një shfletues në kompjuterin tuaj ose Mac dhe në dritaren e URL -së futni:

♣ mjedër-pi-ip-adresa ♣/index.html

Serveri im kërkon një lidhje të sigurt (hiqni hapësirat rreth zorrës së trashë):

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

Dhe funksionon!

Hapi 2: Shtojca: Referencat

• Skripti CSS Meny fizarmonikë me shumë nivele duke përdorur vetëm HTML dhe CSS
• Menyja e fizarmonikës W3Schools
• W3Schools CSS
• W3Schools HTML

Hapi 3: Shtojca: Përditësimet

Hapi 4: Shtojca: Zgjidhja e problemeve

Këtu janë disa ide që mund të ndihmojnë:

• Për të formatuar HTML në deklaratat jehonë php, shtoni "\ r" në fund për të vendosur një karakter kthyes
• ID-ja e grupit për një nënmeny duhet të jetë unike. Nëse grupi-id i nën-menusë nuk është unik, atëherë artikujt e nën-menusë së tij do të përfshihen në shembullin e parë të grupit-id