Menu ng Pagkakasundo: 4 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:12

Lumikha ng isang multi-level na menu ng akordyon gamit lamang ang HTML at CSS.

Habang gumagamit ako ng isang Raspberry Pi para sa aking mga proyekto, maaari itong tumakbo sa anumang web server.

Sa halip na magbigay ng mga halimbawa ng kung paano lumikha ng isang partikular na elemento ng web, ang layunin ay magkaroon ng isang template na may kasamang mga gumaganang halimbawa ng bawat elemento na ginamit sa aking mga proyekto. Mas madaling baguhin ang isang bagay na gagana, pagkatapos ay sinusubukan itong gumana.

Ang isang akordyon menu ay maaaring magamit bilang isang interface sa isang aparato Raspberry Pi sa pamamagitan ng isang computer, pad o mobile phone. Habang gumagamit ako ng isang Raspberry Pi na tumatakbo lighttpd, maaaring magamit ang anumang hardware at web server.

Ang bawat proyekto ng Raspberry Pi ay dapat magkaroon ng isang interface. Dahil sa maliit nitong sukat ng pagpapakita, ang mga mobile phone ang pinakamahigpit. Ang isang menu ng akurdyon ay nakakakuha ng mga limitasyon ng isang telepono sa pamamagitan ng pagpapalawak (+) at pagbagsak (-) patayo na pinapayagan ang maraming mga item sa menu kung kinakailangan.

Maraming mga halimbawa ng mga menu ng akordyon sa web. Dahil gusto ko ang hitsura at pakiramdam ng OpenHAB o OpenSprinkler, gusto ko ng katulad.

Hanggang ngayon, ang mga menu ng aking proyekto na Raspberry Pi ay napakasimple. Hindi ako gumastos ng maraming oras sa hitsura-at-pakiramdam. Karamihan sa aking mga interface ay nakasulat lamang sa HTML at hindi ginamit ang CSS. Hindi ako taga-disenyo ng UI at ang pagtatrabaho sa hitsura at pakiramdam ay nasa labas ng aking kaginhawaan. Dahil hindi ako madalas gumana sa mga website, natutunan ko at nakalimutan ang CSS nang maraming beses. Nais kong gawin ang menu na hitsura-at-pakiramdam nang isang beses, maayos ito, at pagkatapos ay muling gamitin ito.

Sa aking mga aplikasyon, kailangan ko ang menu upang suportahan:

• mga link sa iba pang mga website o aparato,
• ipakita ang mga halaga o katayuan at
• payagan ang mga pag-update sa mga halaga.

Ang huling dalawa ay nangangailangan ng higit sa HTML at CSS.

Dahil hindi ko alam nang maaga, kung gaano karaming mga item sa menu ang kakailanganin ko, pinapayagan ng isang akordyon na menu ang kakayahang umangkop upang mapalawak ang menu ayon sa kinakailangan.

Ang aking mga komento sa CSS at HTML ay maaaring medyo nasa itaas, ngunit maaari kong tingnan ang mga komento at malaman kung paano baguhin ang menu upang matugunan ang aking mga pangangailangan nang hindi muling natututo ng CSS. Ang mga komento ay ginagawang madali para sa akin upang maunawaan kung paano nakakaapekto ang CSS sa HTML nang hindi pabalik-balik sa pagitan ng dalawa.

Mayroon akong ilang iba pang mga kinakailangan:

• Minsan nawawalan ng access sa internet ang aking bahay. Kaya, hindi ako maaaring magkaroon ng sistema ng menu na nakasalalay sa mga link sa mga panlabas na website, na kasama ang mga panlabas na font, API o javascript
• Ang aking pamilya ay may kagustuhan sa eclectic computer at gumagamit ng iPhone, android, MACs, PC at iPads, tablet, pati na rin, chrome, firefox, safari at IE. Kailangang tumakbo ang menu sa lahat ng ito

Gumugol ako ng ilang linggo sa pagsubok ng iba't ibang mga pagpapatupad ng menu ng akordyon. Ang pag-edit sa kanila, pag-aangkop sa kanila at pagbibigay sa kanila. Ang website, CSS Script, ay may isang multi-level na menu na natutugunan ang lahat ng aking mga kinakailangan at nabubuo ang batayan ng itinuturo na ito.

Hakbang 1: Hakbang-hakbang na Pag-install

Buksan ang window ng terminal sa isang MacBook o PC at patakbuhin ang mga sumusunod na utos:

Palitan ang mga item sa with ng mga tunay na halaga.

Mag-login sa Raspberry Pi

$ ssh pi @ ♣ raspberry-pi-ip-address ♣

Baguhin sa pangunahing direktoryo

$ cd / var / www

Mag-download ng index.html, at baguhin ang mga pahintulot at may-ari ng file

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

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

Gumawa ng isang direktoryo para sa mga imahe at lumipat sa direktoryo na iyon

$ mkdir img

$ cd img

I-download ang mga imahe at palitan ang may-ari.

$ 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

I-backup sa pangunahing direktoryo, at likhain ang direktoryo ng css at lumipat dito

$ cd..

$ mkdir css $ cd css

I-download ang style sheet, at baguhin ang mga pahintulot at may-ari ng file

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

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

Kung wala kang isang raspberry pi, maaari mong i-download ang mga file na ito sa isang Mac o PC. Upang patakbuhin ang menu mula sa isang Mac o PC, alinman

• i-double click sa index.html, o
• piliin ang index.html, pag-right click, at buksan gamit ang browser na iyong pinili.

Kung gumagamit ng isang Raspberry Pi, dapat itong nagpapatakbo ng isang web server. Magbukas ng isang browser sa iyong PC o Mac, at sa window ng URL ipasok ang:

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

Ang aking server ay nangangailangan ng isang ligtas na koneksyon (alisin ang mga puwang sa paligid ng colon):

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

At ito ay gumagana!

Hakbang 2: Apendiks: Mga Sanggunian

• CSS script Multilevel akordyon menu gamit lamang ang HTML at CSS
• W3Schools akordyon menu
• W3Schools CSS
• W3Schools HTML

Hakbang 3: Apendiks: Mga Update

Hakbang 4: Appendix: Pag-troubleshoot

Narito ang ilang mga ideya na maaaring makatulong:

• Upang mai-format ang HTML sa mga pahayag ng echo ng php, idagdag ang "\ r" sa dulo upang ilagay sa isang character na bumalik
• Ang pangkat na-id para sa isang sub-menu ay dapat na natatangi. Kung ang pangkat-id ng isang sub-menu ay hindi natatangi sa gayon ang mga item ng sub-menu ay isasama sa unang pagkakataon ng group-id