Akkordeon Menü: 4 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Erstellen Sie ein mehrstufiges Akkordeonmenü nur mit HTML und CSS.

Während ich für meine Projekte einen Raspberry Pi verwende, kann dieser auf jedem Webserver laufen.

Anstatt Beispiele für die Erstellung eines bestimmten Webelements bereitzustellen, besteht das Ziel darin, eine Vorlage zu haben, die Arbeitsbeispiele für jedes Element enthält, das in meinen Projekten verwendet wird. Es ist einfacher, etwas zu ändern, das funktioniert, als zu versuchen, es zum Laufen zu bringen.

Ein Akkordeon-Menü kann als Schnittstelle zu einem Raspberry Pi-Gerät über einen Computer, ein Pad oder ein Mobiltelefon verwendet werden. Während ich einen Raspberry Pi mit lighttpd verwende, kann jede Hardware und jeder Webserver verwendet werden.

Jedes Raspberry-Pi-Projekt sollte eine Schnittstelle haben. Aufgrund seiner relativ kleinen Displaygröße sind Mobiltelefone am restriktivsten. Ein Akkordeon-Menü umgeht die Grenzen eines Telefons, indem es vertikal erweitert (+) und zusammengeklappt (-) wird und so viele Menüpunkte wie erforderlich ermöglicht werden.

Es gibt viele Beispiele für Akkordeonmenüs im Internet. Da mir das Look-and-Feel von OpenHAB oder OpenSprinkler gefällt, wollte ich etwas Ähnliches.

Bisher waren die Menüs meines Raspberry Pi-Projekts sehr einfach. Ich habe nicht viel Zeit mit dem Look-and-Feel verbracht. Die meisten meiner Interfaces wurden nur in HTML geschrieben und verwendeten kein CSS. Ich bin kein UI-Designer und die Arbeit am Look-and-Feel liegt außerhalb meiner Komfortzone. Da ich nicht oft an Websites arbeite, habe ich CSS mehrmals gelernt und vergessen. Ich wollte das Menü-Look-and-Feel einmal machen, es richtig machen und es dann wiederverwenden.

In meinen Anwendungen benötige ich das Menü zur Unterstützung von:

• Links zu anderen Websites oder Geräten,
• Werte oder Status anzeigen und
• Aktualisierungen von Werten zulassen.

Die letzten beiden erfordern mehr als HTML und CSS.

Da ich im Voraus nicht weiß, wie viele Menüpunkte ich benötige, bietet ein Akkordeon-Menü die Flexibilität, das Menü nach Bedarf zu erweitern.

Meine Kommentare in CSS und HTML sind vielleicht etwas übertrieben, aber ich kann mir die Kommentare ansehen und weiß, wie ich das Menü an meine Bedürfnisse anpassen kann, ohne CSS neu zu lernen. Die Kommentare machen es mir auch leicht zu verstehen, wie sich das CSS auf das HTML auswirkt, ohne zwischen den beiden hin- und herzublättern.

Ich hatte noch ein paar andere Anforderungen:

• Manchmal verliert mein Haus den Internetzugang. Ich kann das Menüsystem also nicht von Links zu externen Websites abhängig machen, die externe Schriftarten, APIs oder Javascript enthalten
• Meine Familie hat einen vielseitigen Computergeschmack und verwendet iPhone, Android, MACs, PC und iPads, Tablets sowie Chrome, Firefox, Safari und IE. Auf all diesen muss das Menü laufen

Ich habe ein paar Wochen damit verbracht, verschiedene Akkordeon-Menü-Implementierungen auszuprobieren. Bearbeiten, anpassen und aufgeben. Die Website, CSS Scripts, hat ein mehrstufiges Menü, das alle meine Anforderungen erfüllt und die Grundlage für dieses instructable bildet.

Schritt 1: Schritt-für-Schritt-Installation

Öffnen Sie das Terminalfenster auf einem MacBook oder PC und führen Sie die folgenden Befehle aus:

Ersetzen Sie die Elemente in ♣ durch tatsächliche Werte.

Einloggen in Raspberry Pi

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

In das Hauptverzeichnis wechseln

$ cd /var/www

Laden Sie index.html herunter und ändern Sie die Berechtigungen und den Eigentümer der Datei

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

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

Erstellen Sie ein Verzeichnis für Bilder und wechseln Sie in dieses Verzeichnis

$ mkdir img

$ cd img

Laden Sie die Bilder herunter und ändern Sie den Besitzer.

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

Sichern Sie in das Hauptverzeichnis, erstellen Sie das CSS-Verzeichnis und verschieben Sie es hinein

$ cd..

$ mkdir css $ cd css

Laden Sie das Stylesheet herunter und ändern Sie die Berechtigungen und den Eigentümer der Datei

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

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

Wenn Sie keinen Raspberry Pi haben, können Sie diese Dateien auf einen Mac oder PC herunterladen. Um das Menü von einem Mac oder PC aus auszuführen, entweder

• Doppelklick auf index.html, oder
• Wählen Sie index.html, klicken Sie mit der rechten Maustaste und öffnen Sie mit dem Browser Ihrer Wahl.

Wenn Sie einen Raspberry Pi verwenden, muss auf diesem ein Webserver ausgeführt werden. Öffnen Sie einen Browser auf Ihrem PC oder Mac und geben Sie im URL-Fenster Folgendes ein:

♣Himbeer-Pi-IP-Adresse♣/index.html

Mein Server erfordert eine sichere Verbindung (Leerzeichen um den Doppelpunkt entfernen):

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

Und es funktioniert!

Schritt 2: Anhang: Referenzen

• CSS-Skript Mehrstufiges Akkordeonmenü, das nur HTML und CSS verwendet
• W3Schools Akkordeon Menü
• W3Schools CSS
• W3Schools-HTML

Schritt 3: Anhang: Updates

Schritt 4: Anhang: Fehlerbehebung

Hier sind einige Ideen, die helfen könnten:

• Um HTML in PHP-Echo-Anweisungen zu formatieren, fügen Sie am Ende "\r" hinzu, um ein Rückgabezeichen einzufügen
• Die Gruppen-ID für ein Untermenü muss eindeutig sein. Wenn die Gruppen-ID eines Untermenüs nicht eindeutig ist, werden seine Untermenüelemente in die erste Instanz der Gruppen-ID aufgenommen