Akordeónové menu: 4 kroky

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

Vytvorte viacúrovňové akordeónové menu iba pomocou HTML a CSS.

Aj keď na svoje projekty používam Raspberry Pi, môže bežať na akomkoľvek webovom serveri.

Cieľom namiesto poskytnutia príkladov vytvárania konkrétneho webového prvku je mať šablónu, ktorá obsahuje pracovné príklady každého prvku použitého v mojich projektoch. Je jednoduchšie zmeniť niečo, čo funguje, a potom sa pokúsiť dosiahnuť, aby to fungovalo.

Akordeónovú ponuku je možné použiť ako rozhranie k zariadeniu Raspberry Pi prostredníctvom počítača, podložky alebo mobilného telefónu. Aj keď používam Raspberry Pi so systémom lighttpd, je možné použiť akýkoľvek hardvér a webový server.

Každý projekt Raspberry Pi by mal mať rozhranie. Vzhľadom na relatívne malú veľkosť displeja sú mobilné telefóny najprísnejšie. Akordeónová ponuka obchádza limity telefónu rozbalením (+) a zvinutím (-) zvisle, čo umožňuje toľko položiek ponuky, koľko je potrebné.

Na webe je veľa príkladov akordeónových ponúk. Pretože sa mi páči vzhľad a dojem z OpenHAB alebo OpenSprinkler, chcel som niečo podobné.

Doteraz boli ponuky môjho projektu Raspberry Pi veľmi jednoduché. Nestrávil som veľa času vzhľadom a dojmom. Väčšina mojich rozhraní bola napísaná iba v HTML a nepoužívala žiadne CSS. Nie som dizajnér používateľského rozhrania a práca na vzhľade a dojme je mimo mojej zóny komfortu. Pretože nepracujem na webových stránkach príliš často, naučil som sa CSS viackrát a zabudol som. Chcel som raz urobiť vzhľad a dojem z menu, správne ho uviesť a potom znova použiť.

V mojich aplikáciách potrebujem, aby ponuka podporovala:

• odkazy na iné webové stránky alebo zariadenia,
• zobraziť hodnoty alebo stav a
• povoliť aktualizácie hodnôt.

Posledné dva vyžadujú viac ako HTML a CSS.

Pretože vopred neviem, koľko položiek ponuky budem potrebovať, akordeónové menu umožňuje flexibilné rozšírenie ponuky podľa potreby.

Moje komentáre v CSS a HTML môžu byť trochu prehnané, ale môžem sa pozrieť na komentáre a vedieť, ako zmeniť menu tak, aby zodpovedalo mojim potrebám, bez toho, aby som sa znova učil CSS. Komentáre mi tiež uľahčujú pochopenie toho, ako CSS ovplyvňuje HTML, bez toho, aby ste medzi nimi prechádzali tam a späť.

Mal som niekoľko ďalších požiadaviek:

• Niekedy môj dom stratí prístup na internet. Nemôžem preto nechať systém ponúk závisieť od odkazov na externé webové stránky, ktoré obsahujú externé písma, rozhrania API alebo javascript
• Moja rodina má eklektický vkus na počítače a používa iPhone, Android, MAC, PC a iPad, tablety, ako aj Chrome, Firefox, Safari a IE. Na všetkých týchto položkách musí byť spustená ponuka

Strávil som pár týždňov skúšaním rôznych implementácií harmonikového menu. Ich úprava, prispôsobenie a vzdanie sa ich. Webová stránka, CSS Scripts, má viacúrovňové menu, ktoré spĺňa všetky moje požiadavky a tvorí základ tohto pokynu.

Krok 1: Inštalácia krok za krokom

Na MacBooku alebo PC otvorte okno terminálu a spustite nasledujúce príkazy:

Vymeňte položky v with za skutočné hodnoty.

Prihláste sa do Raspberry Pi

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

Zmeniť na hlavný adresár

$ cd /var /www

Stiahnite si index.html a zmeňte povolenia a vlastníka súboru

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

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

Vytvorte adresár pre obrázky a presuňte sa do neho

$ mkdir obr

$ cd obr

Stiahnite si obrázky a zmeňte majiteľa.

$ 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/ malina-pi.png "$ sudo chown pi *.png

Zálohujte do hlavného adresára a vytvorte priečinok css a presuňte sa doň

$ cd..

$ mkdir css $ cd css

Stiahnite si šablónu štýlov a zmeňte povolenia a vlastníka súboru

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

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

Ak nemáte malinové pi, môžete si tieto súbory stiahnuť do počítača Mac alebo PC. Ponuku spustíte z počítača Mac alebo PC

• dvakrát kliknite na index.html, alebo
• vyberte index.html, kliknite pravým tlačidlom myši a otvorte prehliadač, ktorý si vyberiete.

Ak používate Raspberry Pi, musí na ňom byť webový server. Otvorte prehliadač na počítači PC alebo Mac a v okne s adresou URL zadajte:

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

Môj server vyžaduje zabezpečené pripojenie (odstráňte medzery okolo dvojbodky):

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

A funguje to!

Krok 2: Príloha: Referencie

• Skript CSS Viacúrovňová akordeónová ponuka používajúca iba HTML a CSS
• Akordeónové menu W3Školy
• W3Schools CSS
• W3Schools HTML

Krok 3: Príloha: Aktualizácie

Krok 4: Príloha: Riešenie problémov

Tu je niekoľko nápadov, ktoré by mohli pomôcť:

• Ak chcete formátovať HTML v príkazoch ozveny php, pridajte na koniec znak „\ r“a vložte znak návratu
• ID skupiny pre podponuku musí byť jedinečné. Ak identifikátor skupiny sub-menu nie je jedinečný, položky jeho sub-menu budú zahrnuté v prvom prípade id-skupiny