Meniu acordeon: 4 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Creați un meniu de acordeon pe mai multe niveluri utilizând numai HTML și CSS.

În timp ce folosesc un Raspberry Pi pentru proiectele mele, acesta poate rula pe orice server web.

În loc să oferi exemple despre cum să creezi un anumit element web, scopul este să ai un șablon care să includă exemple de lucru ale fiecărui element utilizat în proiectele mele. Este mai ușor să modificați ceva care funcționează, apoi să încercați să îl puneți în funcțiune.

Un meniu acordeon poate fi folosit ca o interfață pentru un dispozitiv Raspberry Pi prin intermediul unui computer, pad sau telefon mobil. În timp ce folosesc un Raspberry Pi care rulează lighttpd, poate fi folosit orice hardware și server web.

Fiecare proiect Raspberry Pi ar trebui să aibă o interfață. Datorită dimensiunii relativ mici a afișajului, telefoanele mobile sunt cele mai restrictive. Un meniu acordeon ajunge în jurul limitelor unui telefon prin extinderea (+) și prăbușirea (-) pe verticală permițând cât mai multe elemente de meniu, după cum este necesar.

Există multe exemple de meniuri pentru acordeon pe web. Deoarece îmi place aspectul OpenHAB sau OpenSprinkler, am vrut ceva similar.

Până în prezent, meniurile proiectului meu Raspberry Pi au fost foarte simple. Nu am petrecut mult timp în privința aspectului. Majoritatea interfețelor mele au fost scrise numai în HTML și nu au folosit CSS. Nu sunt un designer de interfață și lucrez la aspectul și simțul este în afara zonei mele de confort. Deoarece nu lucrez foarte des pe site-uri web, am învățat și am uitat de mai multe ori CSS. Am vrut să fac meniul să arate și să se simtă o dată, să-l fac corect și apoi să îl refolosesc.

În aplicațiile mele, am nevoie de meniu pentru a susține:

• linkuri către alte site-uri web sau dispozitive,
• afișează valori sau stare și
• permite actualizări ale valorilor.

Ultimele două necesită mai mult decât HTML și CSS.

Deoarece nu știu dinainte, câte articole de meniu voi avea nevoie, un meniu acordeon permite flexibilitatea de a extinde meniul după cum este necesar.

Comentariile mele în CSS și HTML pot fi puțin peste partea de sus, dar pot să mă uit la comentarii și să știu cum să schimb meniul pentru a satisface nevoile mele fără să reînvăț CSS. Comentariile îmi facilitează, de asemenea, să înțeleg modul în care CSS are impact asupra HTML-ului fără a răsfoi înainte și înapoi între cele două.

Am avut câteva alte cerințe:

• Uneori, casa mea pierde accesul la internet. Deci, nu pot face ca meniul să depindă de link-uri către site-uri web externe, care includ fonturi externe, API-uri sau javascript
• Familia mea are gusturi eclectice de computer și folosește iPhone, Android, MAC-uri, PC-uri și iPad-uri, tablete, precum și Chrome, Firefox, Safari și IE. Meniul trebuie să ruleze pe toate acestea

Am petrecut câteva săptămâni încercând diverse implementări ale meniului acordeon. Editarea lor, adaptarea lor și renunțarea la ele. Site-ul Web, CSS Scripts, are un meniu pe mai multe niveluri care îndeplinește toate cerințele mele și stă la baza acestui instructiv.

Pasul 1: Instalare pas cu pas

Deschideți fereastra terminalului pe un MacBook sau PC și executați următoarele comenzi:

Înlocuiți elementele din ♣ cu valori reale.

Conectați-vă la Raspberry Pi

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

Treceți la directorul principal

$ cd / var / www

Descărcați index.html și modificați permisiunile și proprietarul fișierului

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

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

Creați un director pentru imagini și mutați-l în acel director

$ mkdir img

$ cd img

Descărcați imaginile și schimbați proprietarul.

$ 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

Faceți o copie de rezervă în directorul principal și creați directorul CSS și mutați-l în el

$ cd..

$ mkdir css $ cd css

Descărcați foaia de stil și modificați permisiunile și proprietarul fișierului

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

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

Dacă nu aveți un raspberry pi, puteți descărca aceste fișiere pe un Mac sau PC. Pentru a rula meniul de pe un Mac sau PC, fie

• faceți dublu clic pe index.html sau
• selectați index.html, faceți clic dreapta și deschideți cu browserul la alegere.

Dacă utilizați un Raspberry Pi, acesta trebuie să ruleze un server web. Deschideți un browser pe computer sau Mac și în fereastra URL introduceți:

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

Serverul meu necesită o conexiune sigură (eliminați spațiile din jurul colonului):

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

Și funcționează!

Pasul 2: Anexă: Referințe

• Script CSS Meniu acordeon pe mai multe niveluri folosind doar HTML și CSS
• Meniul W3Schools acordeon
• W3Schools CSS
• W3Schools HTML

Pasul 3: Anexă: Actualizări

Pasul 4: Anexă: Depanare

Iată câteva idei care ar putea ajuta:

• Pentru a formata HTML în declarații de ecou php, adăugați „\ r” la final pentru a introduce un caracter return
• ID-ul grupului pentru un submeniu trebuie să fie unic. Dacă ID-ul de grup al unui submeniu nu este unic, atunci elementele sale de submeniu vor fi incluse în prima instanță a id-ului de grup