Menyu ya Accordion: 4 Hatua

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:51

Unda orodha ya kondoni ya ngazi nyingi ukitumia HTML na CSS tu.

Wakati ninatumia Raspberry Pi kwa miradi yangu, hii inaweza kukimbia kwenye seva yoyote ya wavuti.

Badala ya kutoa mifano ya jinsi ya kuunda kipengee fulani cha wavuti, lengo ni kuwa na templeti ambayo inajumuisha mifano ya kufanya kazi ya kila kitu kinachotumiwa katika miradi yangu. Ni rahisi kurekebisha kitu kinachofanya kazi, kisha kujaribu kuifanya ifanye kazi.

Menyu ya accordion inaweza kutumika kama kiolesura cha kifaa cha Raspberry Pi kupitia kompyuta, pedi au simu ya rununu. Wakati ninatumia Raspberry Pi inayoendesha lighttpd, vifaa yoyote na seva ya wavuti inaweza kutumika.

Kila mradi wa Raspberry Pi unapaswa kuwa na kiolesura. Kwa sababu ya saizi ndogo ya kuonyesha, simu za rununu ndizo zenye vizuizi zaidi. Menyu ya accordion inazunguka mipaka ya simu kwa kupanua (+) na kuanguka (-) kwa wima ikiruhusu vitu vingi vya menyu inavyotakiwa.

Kuna mifano mingi ya menyu ya akodoni kwenye wavuti. Kwa sababu napenda kuangalia-na-kuhisi kwa OpenHAB au OpenSprinkler, nilitaka kitu kama hicho.

Hadi sasa, menyu za mradi wangu wa Raspberry Pi zimekuwa rahisi sana. Sikutumia muda mwingi kwenye sura-na-kujisikia. Sehemu zangu nyingi ziliandikwa tu kwa HTML na hazitumii CSS. Mimi sio mbuni wa UI na kufanya kazi kwa kuangalia-na-kujisikia iko nje ya eneo langu la raha. Kwa sababu sifanyi kazi kwenye wavuti mara nyingi, nimejifunza na kusahau CSS mara nyingi. Nilitaka kufanya menyu kuangalia-na-kujisikia mara moja, kuipata sawa, na kisha kuitumia tena.

Katika maombi yangu, ninahitaji menyu kusaidia:

• viungo kwa tovuti zingine au vifaa,
• kuonyesha maadili au hali na
• ruhusu sasisho kwa maadili.

Hizi mbili za mwisho zinahitaji zaidi ya HTML na CSS.

Kwa kuwa sijui mapema, nitahitaji vitu vingapi vya menyu, menyu ya accordion inaruhusu kubadilika kupanua menyu inavyohitajika.

Maoni yangu katika CSS na HTML yanaweza kuwa juu kidogo, lakini naweza kuangalia maoni na kujua jinsi ya kubadilisha menyu kukidhi mahitaji yangu bila kujifunza tena CSS. Maoni pia hufanya iwe rahisi kwangu kuelewa jinsi CSS inavyoathiri HTML bila kurudi nyuma-na-kati kati ya hizo mbili.

Nilikuwa na mahitaji mengine machache:

• Wakati mwingine nyumba yangu inapoteza ufikiaji wa mtandao. Kwa hivyo, siwezi kuwa na mfumo wa menyu unategemea viungo kwenye wavuti za nje, ambazo zinajumuisha fonti za nje, API au javascript
• Familia yangu ina ladha ya kompyuta na hutumia iPhone, android, MAC, PC na iPads, vidonge, na vile vile, chrome, firefox, safari na IE. Menyu inahitaji kutekeleza haya yote

Nilikaa wiki kadhaa kujaribu utekelezaji wa menyu anuwai ya akodoni. Kuzihariri, kuzirekebisha na kuziacha. Tovuti, Hati za CSS, ina menyu ya ngazi anuwai iliyokidhi mahitaji yangu yote na hufanya msingi wa hii inayoweza kufundishwa.

Hatua ya 1: Sakinisha hatua kwa hatua

Fungua dirisha la terminal kwenye MacBook au PC na utumie amri zifuatazo:

Badilisha vitu kwa ♣ na maadili halisi.

Ingia kwenye Raspberry Pi

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

Badilisha kwa saraka kuu

$ cd / var / www

Pakua index.html, na ubadilishe idhini na mmiliki wa faili

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

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

Tengeneza saraka ya picha na uhamie kwenye saraka hiyo

$ mkdir img

$ cd img

Pakua picha na ubadilishe mmiliki.

$ 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

Hifadhi kwenye saraka kuu, na uunda saraka ya css na uingie ndani

$ cd..

$ mkdir css $ cd css

Pakua karatasi ya mtindo, na ubadilishe ruhusa na mmiliki wa faili

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

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

Ikiwa hauna pi ya raspberry, basi unaweza kupakua faili hizi kwa Mac au PC. Ili kuendesha menyu kutoka kwa Mac au PC, aidha

• bonyeza mara mbili kwenye index.html, au
• chagua index.html, bonyeza kulia, na ufungue na kivinjari cha chaguo lako.

Ikiwa unatumia Raspberry Pi, lazima iwe inaendesha seva ya wavuti. Fungua kivinjari kwenye PC yako au Mac, na kwenye dirisha la URL ingiza:

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

Seva yangu inahitaji muunganisho salama (ondoa nafasi karibu na koloni):

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

Na inafanya kazi!

Hatua ya 2: Kiambatisho: Marejeo

• Hati ya CSS ya Multilevel accordion menyu kwa kutumia HTML na CSS tu
• Menyu ya W3Schools
• W3Schools CSS
• W3Schools HTML

Hatua ya 3: Kiambatisho: Sasisho

Hatua ya 4: Kiambatisho: Utatuzi wa maswali

Hapa kuna maoni ambayo yanaweza kusaidia:

• Ili muundo HTML katika taarifa za php echo, ongeza "\ r" mwishoni kuweka herufi ya kurudi
• Kitambulisho cha kikundi cha menyu-ndogo lazima kiwe cha kipekee. Ikiwa kitambulisho cha kikundi cha menyu-ndogo sio ya kipekee basi vitu vyake vya menyu ndogo vitajumuishwa katika tukio la kwanza la kitambulisho cha kikundi