Akordeono meniu: 4 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:46

Sukurkite kelių lygių akordeono meniu naudodami tik HTML ir CSS.

Nors savo projektams naudoju „Raspberry Pi“, tai gali veikti bet kuriame žiniatinklio serveryje.

Užuot pateikęs tam tikro žiniatinklio elemento kūrimo pavyzdžių, tikslas yra turėti šabloną, kuriame būtų kiekvieno mano projektuose naudojamo elemento darbiniai pavyzdžiai. Lengviau modifikuoti tai, kas veikia, o tada bandyti ją įjungti.

Akordeono meniu galima naudoti kaip sąsają su „Raspberry Pi“įrenginiu per kompiuterį, trinkelę ar mobilųjį telefoną. Nors naudoju „Raspberry Pi“veikiantį „lighttpd“, galima naudoti bet kokią aparatinę įrangą ir žiniatinklio serverį.

Kiekvienas „Raspberry Pi“projektas turėtų turėti sąsają. Dėl palyginti mažo ekrano dydžio mobilieji telefonai yra labiausiai ribojantys. Akordeono meniu apeina telefono ribas, išplečiant (+) ir sutraukiant (-) vertikaliai, leidžiant tiek meniu elementų, kiek reikia.

Žiniatinklyje yra daug akordeono meniu pavyzdžių. Kadangi man patinka „OpenHAB“ar „OpenSprinkler“išvaizda, aš norėjau kažko panašaus.

Iki šiol mano Raspberry Pi projekto meniu buvo labai paprastas. Nepraleidau daug laiko išvaizdai. Dauguma mano sąsajų buvo parašytos tik HTML ir nenaudojo CSS. Nesu vartotojo sąsajos dizaineris, o darbas dėl išvaizdos yra už mano komforto zonos ribų. Kadangi nedažnai dirbu svetainėse, kelis kartus išmokau ir pamiršau CSS. Norėjau vieną kartą meniu atrodyti ir jaustis, teisingai jį sutvarkyti ir vėl naudoti.

Mano programose man reikia, kad meniu palaikytų:

• nuorodos į kitas svetaines ar įrenginius,
• rodyti reikšmes arba būseną ir
• leisti atnaujinti vertybes.

Paskutiniai du reikalauja daugiau nei HTML ir CSS.

Kadangi iš anksto nežinau, kiek meniu elementų man reikės, akordeono meniu leidžia lanksčiai išplėsti meniu pagal poreikį.

Mano komentarai CSS ir HTML gali būti šiek tiek per daug, tačiau galiu pažvelgti į komentarus ir žinoti, kaip pakeisti meniu, kad jis atitiktų mano poreikius, iš naujo nesimokydamas CSS. Iš komentarų man taip pat nesunku suprasti, kaip CSS daro įtaką HTML, nesukant pirmyn ir atgal tarp dviejų.

Turėjau dar keletą reikalavimų:

• Kartais mano namai praranda prieigą prie interneto. Taigi, negaliu turėti, kad meniu sistema priklausytų nuo nuorodų į išorines svetaines, kuriose yra išorinių šriftų, API ar „JavaScript“
• Mano šeima turi eklektišką kompiuterio skonį ir naudoja „iPhone“, „Android“, MAC, kompiuterius ir „iPad“, planšetinius kompiuterius, taip pat „Chrome“, „Firefox“, „Safari“ir „IE“. Meniu turi būti vykdomas naudojant visas šias priemones

Porą savaičių išbandžiau įvairius akordeono meniu variantus. Redaguoti, pritaikyti ir atsisakyti. Svetainėje „CSS Scripts“yra kelių lygių meniu, kuris atitiko visus mano reikalavimus ir yra šios instrukcijos pagrindas.

1 veiksmas: žingsnis po žingsnio įdiekite

Atidarykite terminalo langą „MacBook“ar asmeniniame kompiuteryje ir paleiskite šias komandas:

Pakeiskite elementus ♣ faktinėmis vertėmis.

Prisijunkite prie Raspberry Pi

$ ssh pi@♣ aviečių-pi-ip adresas ♣

Pakeiskite į pagrindinį katalogą

$ cd /var /www

Atsisiųskite index.html ir pakeiskite leidimus bei failo savininką

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

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

Sukurkite vaizdų katalogą ir pereikite prie to katalogo

$ mkdir img

$ cd img

Atsisiųskite paveikslėlius ir pakeiskite savininką.

$ 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/ aviečių-pi-p.webp

Sukurkite atsarginę kopiją pagrindiniame kataloge, sukurkite css katalogą ir pereikite prie jo

$ cd..

$ mkdir css $ cd css

Atsisiųskite stiliaus lapą ir pakeiskite leidimus bei failo savininką

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

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

Jei neturite „Raspberry pi“, galite atsisiųsti šiuos failus į „Mac“arba asmeninį kompiuterį. Jei norite paleisti meniu iš „Mac“ar kompiuterio, arba

• dukart spustelėkite index.html arba
• pasirinkite index.html, dešiniuoju pelės mygtuku spustelėkite ir atidarykite naudodami pasirinktą naršyklę.

Jei naudojate „Raspberry Pi“, jis turi paleisti žiniatinklio serverį. Atidarykite savo kompiuterio ar „Mac“naršyklę ir URL lange įveskite:

♣ aviečių-pi-ip adresas ♣/index.html

Mano serveriui reikalingas saugus ryšys (pašalinkite tarpus tarp dvitaškio):

„aviečių-pi-ip-address♣/index.html

Ir tai veikia!

2 žingsnis: Priedas: Nuorodos

• CSS scenarijus Daugiapakopis akordeono meniu, naudojant tik HTML ir CSS
• „W3Schools“akordeono meniu
• W3Schools CSS
• W3Schools HTML

3 žingsnis: Priedas: Atnaujinimai

4 žingsnis: Priedas: Trikčių šalinimas

Štai keletas idėjų, kurios gali padėti:

• Jei norite formatuoti HTML „php echo“teiginiuose, pabaigoje pridėkite „\ r“, kad įvestumėte grąžinimo simbolį
• Submeniu grupės ID turi būti unikalus. Jei submeniu grupės ID nėra unikalus, jo submeniu elementai bus įtraukti į pirmąjį grupės ID egzempliorių