Nabídka akordeonu: 4 kroky

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Vytvořte víceúrovňovou nabídku akordeonů pouze pomocí HTML a CSS.

I když pro své projekty používám Raspberry Pi, může běžet na jakémkoli webovém serveru.

Místo poskytování příkladů, jak vytvořit konkrétní webový prvek, je cílem mít šablonu, která obsahuje pracovní příklady každého prvku použitého v mých projektech. Je snazší upravit něco, co funguje, a pak se pokusit dostat to do práce.

Akordeonovou nabídku lze použít jako rozhraní k zařízení Raspberry Pi prostřednictvím počítače, podložky nebo mobilního telefonu. Zatímco používám Raspberry Pi se spuštěným lighttpd, lze použít jakýkoli hardware a webový server.

Každý projekt Raspberry Pi by měl mít rozhraní. Vzhledem k relativně malé velikosti displeje nejvíce omezují mobilní telefony. Akordeonová nabídka obejde limity telefonu rozšířením (+) a sbalením (-) svisle, což umožňuje tolik položek nabídky, kolik je potřeba.

Na webu je mnoho příkladů akordeonových nabídek. Protože se mi líbí vzhled a dojem OpenHAB nebo OpenSprinkler, chtěl jsem něco podobného.

Až dosud byly nabídky mého projektu Raspberry Pi velmi jednoduché. Nestrávil jsem mnoho času vzhledem a dojmem. Většina mých rozhraní byla napsána pouze v HTML a nepoužívala žádný CSS. Nejsem designér uživatelského rozhraní a práce na vzhledu a dojmu je mimo moji komfortní zónu. Protože nepracuji na webových stránkách příliš často, CSS jsem se naučil a zapomněl jsem několikrát. Chtěl jsem jednou udělat menu tak, aby vypadalo a cítilo se, bylo to správné a pak to znovu použít.

V mých aplikacích potřebuji nabídku na podporu:

• odkazy na jiné webové stránky nebo zařízení,
• zobrazit hodnoty nebo stav a
• povolit aktualizace hodnot.

Poslední dva vyžadují více než HTML a CSS.

Protože předem nevím, kolik položek nabídky budu potřebovat, nabídka akordeonu umožňuje flexibilně rozšířit nabídku podle potřeby.

Moje komentáře v CSS a HTML mohou být trochu přehnané, ale mohu se podívat na komentáře a vědět, jak změnit nabídku tak, aby vyhovovala mým potřebám, aniž bych se znovu učil CSS. Komentáře mi také usnadňují porozumět tomu, jak CSS ovlivňuje HTML, aniž by se mezi nimi převracelo tam a zpět.

Měl jsem několik dalších požadavků:

• Někdy můj dům ztratí přístup k internetu. Nemohu tedy mít systém nabídek závislý na odkazech na externí weby, které zahrnují externí písma, API nebo javascript
• Moje rodina má eklektický počítačový vkus a používá iPhone, Android, MAC, PC a iPad, tablety a také Chrome, Firefox, Safari a IE. Nabídka musí běžet na všech těchto

Strávil jsem pár týdnů zkoušením různých implementací akordeonového menu. Upravovat je, přizpůsobovat je a vzdávat to. Web, CSS Scripts, má víceúrovňové menu, které splňovalo všechny mé požadavky a tvoří základ tohoto pokynu.

Krok 1: Instalace krok za krokem

Otevřete okno terminálu na MacBooku nebo PC a spusťte následující příkazy:

Vyměňte položky v ♣ za skutečné hodnoty.

Přihlaste se do Raspberry Pi

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

Přejít na hlavní adresář

$ cd /var /www

Stáhněte si index.html a změňte oprávnění a vlastníka souboru

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

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

Vytvořte adresář pro obrázky a přesuňte se do něj

$ mkdir obr

$ cd obr

Stáhněte si obrázky a změňte majitele.

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

Zálohujte do hlavního adresáře a vytvořte adresář css a přesuňte se do něj

$ cd..

$ mkdir css $ cd css

Stáhněte si šablonu stylů a změňte oprávnění a vlastníka souboru

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

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

Pokud nemáte malinové pi, pak si můžete tyto soubory stáhnout na Mac nebo PC. Chcete -li spustit nabídku z počítače Mac nebo PC, buď

• poklepejte na index.html, nebo
• vyberte index.html, klikněte pravým tlačítkem a otevřete v prohlížeči, který si vyberete.

Pokud používáte Raspberry Pi, musí na něm být webový server. Na počítači PC nebo Mac otevřete prohlížeč a do okna adresy URL zadejte:

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

Můj server vyžaduje zabezpečené připojení (odstraňte mezery kolem dvojtečky):

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

A funguje to!

Krok 2: Dodatek: Reference

• Skript CSS Víceúrovňová akordeonová nabídka využívající pouze HTML a CSS
• W3Schools akordeonové menu
• W3Schools CSS
• W3Schools HTML

Krok 3: Dodatek: Aktualizace

Krok 4: Dodatek: Odstraňování problémů

Zde je několik nápadů, které by mohly pomoci:

• Chcete -li formátovat HTML v příkazech php echo, přidejte na konec znak „\ r“a vložte znak návratu
• ID skupiny pro dílčí nabídku musí být jedinečné. Pokud ID skupiny dílčí nabídky není jedinečné, pak její položky podnabídky budou zahrnuty v první instanci ID skupiny