Akordionimenüü: 4 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Looge mitmetasandiline akordionimenüü, kasutades ainult HTML-i ja CSS-i.

Kuigi ma kasutan oma projektide jaoks Raspberry Pi, võib see töötada mis tahes veebiserveris.

Selle asemel, et tuua näiteid konkreetse veebielemendi loomise kohta, on eesmärk saada mall, mis sisaldab töönäiteid igast minu projektides kasutatud elemendist. Lihtsam on muuta midagi, mis töötab, ja seejärel proovida seda tööle saada.

Akordionimenüüd saab kasutada arvuti, padja või mobiiltelefoni kaudu Raspberry Pi seadme liidesena. Kuigi ma kasutan Raspberry Pi jooksvat lighttpd, saab kasutada mis tahes riistvara ja veebiserverit.

Igal Raspberry Pi projektil peaks olema liides. Suhteliselt väikese ekraani suuruse tõttu on mobiiltelefonid kõige piiravamad. Akordionimenüü jõuab telefoni piiranguteni, laiendades (+) ja ahendades (-) vertikaalselt, võimaldades nii palju menüüelemente kui vaja.

Veebis on palju näiteid akordionimenüüst. Kuna mulle meeldib OpenHABi või OpenSprinkleri välimus, tahtsin midagi sarnast.

Siiani on minu Raspberry Pi projekti menüüd olnud väga lihtsad. Ma ei kulutanud palju aega välimusele. Enamik minu liideseid oli kirjutatud ainult HTML -is ja ei kasutanud CSS -i. Ma ei ole kasutajaliidese disainer ja välimuse kallal töötamine on väljaspool minu mugavustsooni. Kuna ma ei tööta veebisaitidel väga sageli, olen CSS -i mitu korda õppinud ja unustanud. Tahtsin teha menüüle välimuse ja tunde üks kord, teha see korda ja seejärel uuesti kasutada.

Oma rakendustes pean menüüd toetama:

• lingid teistele veebisaitidele või seadmetele,
• kuvada väärtusi või olekut ja
• lubada väärtuste värskendamist.

Viimased kaks nõuavad enamat kui HTML ja CSS.

Kuna ma ei tea ette, kui palju menüüelemente mul vaja läheb, võimaldab akordionimenüü paindlikkust menüüd vastavalt vajadusele laiendada.

Minu kommentaarid CSS-is ja HTML-is võivad küll veidi üle jõu käia, kuid ma võin kommentaare vaadata ja tean, kuidas oma vajadustele vastavat menüüd muuta ilma CSS-i uuesti õppimata. Kommentaaride abil on mul ka lihtne mõista, kuidas CSS mõjutab HTML-i, ilma nende vahel edasi-tagasi liikumata.

Mul oli veel mõned nõuded:

• Mõnikord kaotab mu maja Interneti -ühenduse. Niisiis, ma ei saa lasta menüüsüsteemil sõltuda linkidest välistele veebisaitidele, mis sisaldavad väliseid fonte, API -sid või javascripti
• Minu perel on eklektiline arvutimaitse ja ta kasutab iPhone'i, androidi, MAC -e, arvutit ja iPadi, tahvelarvuteid, aga ka Chrome'i, Firefoxi, safarit ja IE -d. Menüü peab käima kõigil neil

Veetsin paar nädalat erinevaid akordionimenüü teostusi. Nende toimetamine, kohandamine ja neist loobumine. Veebisaidil CSS Scripts on mitmetasandiline menüü, mis vastas kõigile minu nõuetele ja on selle juhendi aluseks.

Samm: installige samm-sammult

Avage MacBooki või arvuti terminaliaken ja käivitage järgmised käsud:

Asendage üksuste üksused tegelike väärtustega.

Logige sisse Raspberry Pi -sse

$ ssh pi@♣ vaarika-pi-ip-aadress ♣

Muutke põhikataloogi

$ cd /var /www

Laadige alla index.html ning muutke faili õigusi ja omanikku

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

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

Tehke piltide kataloog ja liikuge sellesse kataloogi

$ mkdir img

$ cd img

Laadige pildid alla ja muutke omanikku.

$ 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/ vaarika-pi-p.webp

Varundage põhikataloogi ja looge kataloog css ning liikuge sinna

$ cd..

$ mkdir css $ cd css

Laadige stiilileht alla ja muutke faili õigusi ja omanikku

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

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

Kui teil pole vaarika pi, siis saate need failid Maci või arvutisse alla laadida. Menüü käivitamiseks kas Macist või arvutist

• topeltklõpsake lehel index.html või
• valige index.html, paremklõpsake ja avage valitud brauseriga.

Kui kasutate Raspberry Pi, peab sellel olema veebiserver. Avage arvutis või Macis brauser ja sisestage URL -i aknasse:

♣ vaarika-pi-ip-aadress ♣/index.html

Minu server nõuab turvalist ühendust (eemaldage tühikud kooloni ümber):

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

Ja see töötab!

2. samm: Lisa: viited

• CSS -skript Mitmetasandiline akordionimenüü, mis kasutab ainult HTML -i ja CSS -i
• W3Koolide akordionimenüü
• W3Schools CSS
• W3Schools HTML

3. samm: Lisa: värskendused

4. samm: Lisa: tõrkeotsing

Siin on mõned ideed, mis võivad aidata:

• HTML -i vormindamiseks php kajalausetes lisage lõppu "\ r", et sisestada vastusmärk
• Alammenüü grupi-ID peab olema ainulaadne. Kui alammenüü grupi-ID pole ainulaadne, kaasatakse selle alammenüü üksused grupi-id esimesse eksemplari