Dragspelmeny: 4 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:41

Skapa en dragspelmeny på flera nivåer med endast HTML och CSS.

Medan jag använder en Raspberry Pi för mina projekt kan den köras på vilken webbserver som helst.

Istället för att ge exempel på hur man skapar ett visst webbelement är målet att ha en mall som innehåller arbetsexempel på varje element som används i mina projekt. Det är lättare att ändra något som fungerar och sedan försöka få det att fungera.

En dragspel -meny kan användas som ett gränssnitt till en Raspberry Pi -enhet via en dator, pad eller mobiltelefon. Medan jag använder en Raspberry Pi som kör lighttpd kan vilken maskinvara och webbserver som helst användas.

Varje Raspberry Pi -projekt ska ha ett gränssnitt. På grund av sin relativt små skärmstorlek är mobiltelefoner de mest restriktiva. En dragspel-meny kommer runt telefonens gränser genom att expandera (+) och kollapsa (-) vertikalt så att så många menyalternativ som behövs.

Det finns många exempel på dragspelmenyer på webben. Eftersom jag gillar utseendet på OpenHAB eller OpenSprinkler ville jag ha något liknande.

Hittills har menyerna i mitt Raspberry Pi -projekt varit väldigt enkla. Jag ägnade inte mycket tid åt utseende och känsla. De flesta av mina gränssnitt skrevs endast i HTML och använde ingen CSS. Jag är ingen UI-designer och arbetar med look-and-feel ligger utanför min komfortzon. Eftersom jag inte arbetar på webbplatser särskilt ofta har jag lärt mig och glömt CSS flera gånger. Jag ville göra menyn utseende en gång, få det rätt och sedan återanvända det.

I mina applikationer behöver jag menyn för att stödja:

• länkar till andra webbplatser eller enheter,
• visa värden eller status och
• tillåta uppdateringar av värden.

De två sista kräver mer än HTML och CSS.

Eftersom jag inte vet i förväg, hur många menyalternativ jag kommer att behöva, tillåter en dragspelmeny flexibiliteten att utöka menyn efter behov.

Mina kommentarer i CSS och HTML kan vara lite överdrivet, men jag kan titta på kommentarerna och veta hur man ändrar menyn för att möta mina behov utan att lära om CSS igen. Kommentarer gör det också lätt för mig att förstå hur CSS påverkar HTML utan att bläddra fram och tillbaka mellan de två.

Jag hade några andra krav:

• Ibland tappar mitt hus internetuppkoppling. Så jag kan inte låta menysystemet vara beroende av länkar till externa webbplatser, som inkluderar externa teckensnitt, API: er eller javascript
• Min familj har eklektisk datorsmak och använder iPhone, android, MAC, PC och iPads, surfplattor samt krom, firefox, safari och IE. Menyn måste köras på alla dessa

Jag tillbringade ett par veckor med att prova olika dragspel -menyimplementeringar. Redigera dem, anpassa dem och ge upp. Webbplatsen, CSS Scripts, har en meny på flera nivåer som uppfyllde alla mina krav och ligger till grund för denna instruerbara.

Steg 1: Steg-för-steg-installation

Öppna terminalfönstret på en MacBook eller PC och kör följande kommandon:

Ersätt objekt i with s med verkliga värden.

Logga in på Raspberry Pi

$ ssh pi@♣ hallon-pi-ip-adress ♣

Byt till huvudkatalogen

$ cd /var /www

Ladda ner index.html och ändra behörigheter och ägare till filen

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

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

Skapa en katalog för bilder och gå till den katalogen

$ mkdir img

$ cd img

Ladda ner bilderna och byt ägare.

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

Säkerhetskopiera till huvudkatalogen och skapa css -katalogen och gå in i den

$ cd..

$ mkdir css $ cd css

Ladda ner formatmallen och ändra behörigheter och ägare till filen

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

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

Om du inte har en hallon pi kan du ladda ner dessa filer till en Mac eller PC. För att köra menyn från en Mac eller PC, antingen

• dubbelklicka på index.html eller
• välj index.html, högerklicka och öppna med webbläsaren du väljer.

Om du använder en Raspberry Pi måste den ha en webbserver. Öppna en webbläsare på din PC eller Mac och ange i URL -fönstret:

♣ hallon-pi-ip-adress ♣/index.html

Min server kräver en säker anslutning (ta bort mellanslag runt kolon):

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

Och det fungerar!

Steg 2: Bilaga: Referenser

• CSS -skript Multilevel dragspelmeny med endast HTML och CSS
• W3Schools dragspelmeny
• W3Schools CSS
• W3Schools HTML

Steg 3: Bilaga: Uppdateringar

Steg 4: Bilaga: Felsökning

Här är några idéer som kan hjälpa:

• För att formatera HTML i php echo -satser, lägg till "\ r" i slutet för att sätta in ett tecken
• Grupp-id för en undermeny måste vara unik. Om en undermenys grupp-id inte är unikt kommer dess undermenyalternativ att inkluderas i första instans av grupp-id