Harmonika menü: 4 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40

Hozzon létre többszintű harmonika menüt csak HTML és CSS használatával.

Míg Raspberry Pi -t használok a projektjeimhez, ez bármilyen webkiszolgálón futhat.

Ahelyett, hogy példákat adna arra, hogyan hozhat létre egy adott webes elemet, a cél az, hogy legyen egy sablon, amely a projektjeimben használt minden elem működő példáit tartalmazza. Könnyebb módosítani valamit, ami működik, majd megpróbálni működésbe hozni.

A harmonika menü használható Raspberry Pi eszköz interfészeként számítógépen, padon vagy mobiltelefonon keresztül. Míg Raspberry Pi futó lighttpd -t használok, bármilyen hardver és webszerver használható.

Minden Raspberry Pi projektnek rendelkeznie kell interfésszel. Viszonylag kis kijelzőmérete miatt a mobiltelefonok a legszigorúbbak. A harmonika menü megkerülheti a telefon határait, ha függőlegesen kibővíti (+) és összecsukja (-), lehetővé téve a szükséges menütételeket.

A harmonika menükre számos példa található a weben. Mivel szeretem az OpenHAB vagy az OpenSprinkler megjelenését, valami hasonlót szerettem volna.

Eddig a Raspberry Pi projekt menük nagyon egyszerűek voltak. Nem töltöttem sok időt a külsővel. A legtöbb felületet csak HTML -ben írtam, és nem használtam CSS -t. Nem vagyok felhasználói felület tervező, és a külső megjelenésen kívül a komfortzónámon kívül dolgozom. Mivel nem gyakran dolgozom webhelyeken, többször megtanultam és elfelejtettem a CSS -t. Egyszer meg akartam nézni és érezni a menüt, rendbe hozni, majd újra használni.

Alkalmazásaimban szükségem van a menüre a következők támogatásához:

• más webhelyekre vagy eszközökre mutató linkek,
• értékek vagy állapot megjelenítése és
• lehetővé teszi az értékek frissítését.

Az utolsó kettő többet igényel, mint HTML és CSS.

Mivel nem tudom előre, mennyi menüpontra lesz szükségem, a harmonika menü lehetővé teszi a menü igény szerinti bővítését.

Lehet, hogy a CSS-ben és a HTML-ben megjelent megjegyzéseim kissé túlzásba esnek, de megnézhetem a megjegyzéseket, és tudom, hogyan módosíthatom a menüt az igényeimnek megfelelően anélkül, hogy újra megtanulnám a CSS-t. A megjegyzések azt is megkönnyítik számomra, hogy megértsem, hogyan befolyásolja a CSS a HTML-t anélkül, hogy oda-vissza lapozna a kettő között.

Volt még néhány követelményem:

• Néha a házam elveszíti az internet -hozzáférést. Tehát nem hagyhatom, hogy a menürendszer függjen a külső webhelyekre mutató hivatkozásoktól, amelyek külső betűtípusokat, API -kat vagy javascriptet tartalmaznak
• A családom eklektikus számítógépes ízléssel rendelkezik, és iPhone -t, androidot, MAC -okat, PC -t és iPad -et, táblagépeket, valamint chromot, firefoxot, szafarit és IE -t használ. A menünek ezeken kell futnia

Pár hetet töltöttem a harmonika menü különféle megvalósításainak kipróbálásával. Szerkesztésük, adaptálásuk és lemondásuk. A CSS Scripts weboldal többszintű menüvel rendelkezik, amely minden követelményemnek megfelelt, és ennek az utasításnak az alapját képezi.

1. lépés: Telepítés lépésről lépésre

Nyissa meg a terminál ablakot MacBook vagy PC számítógépen, és futtassa a következő parancsokat:

Cserélje le az items -es elemeket tényleges értékekkel.

Jelentkezzen be a Raspberry Pi -be

$ ssh pi@♣ málna-pi-ip-cím ♣

Váltson főkönyvtárba

$ cd /var /www

Töltse le az index.html fájlt, és módosítsa a jogosultságokat és a fájl tulajdonosát

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

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

Hozzon létre egy könyvtárat a képekhez, és lépjen be ebbe a könyvtárba

$ mkdir img

$ cd img

Töltse le a képeket, és cserélje ki a tulajdonosát.

$ 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

Készítsen biztonsági másolatot a főkönyvtárba, hozza létre a css könyvtárat, és lépjen be

$ cd..

$ mkdir css $ cd css

Töltse le a stíluslapot, és módosítsa a fájl jogosultságait és tulajdonosát

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

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

Ha nincs málna pi, akkor ezeket a fájlokat letöltheti Mac vagy PC -re. A menü Mac vagy PC -ről történő futtatásához vagy

• kattintson duplán az index.html fájlra, vagy
• válassza az index.html lehetőséget, kattintson a jobb egérgombbal, és nyissa meg az Ön által választott böngészővel.

Ha Raspberry Pi -t használ, akkor annak webszervert kell futtatnia. Nyisson meg egy böngészőt PC -jén vagy Mac -jén, és írja be az URL -ablakba:

♣ málna-pi-ip-cím ♣/index.html

A szerver biztonságos kapcsolatot igényel (távolítsa el a szóközt a kettőspont körül):

♣málna-pi-ip-cím♣/index.html

És működik!

2. lépés: Függelék: Hivatkozások

• CSS script Többszintű harmonika menü csak HTML és CSS használatával
• W3Schools harmonika menü
• W3Schools CSS
• W3Schools HTML

3. lépés: Függelék: Frissítések

4. lépés: Függelék: Hibaelhárítás

Íme néhány ötlet, amely segíthet:

• Ha a HTML -t php echo utasításokban kívánja formázni, a végén adja meg a "\ r" karaktert, hogy visszatérési karaktert írjon be
• Az almenü csoport-azonosítójának egyedinek kell lennie. Ha egy almenü csoportazonosítója nem egyedi, akkor az almenü elemei szerepelnek a csoportazonosító első példányában