Accordeonmenu: 4 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Maak een accordeonmenu met meerdere niveaus met alleen HTML en CSS.

Hoewel ik een Raspberry Pi voor mijn projecten gebruik, kan deze op elke webserver draaien.

In plaats van voorbeelden te geven van het maken van een bepaald webelement, is het doel om een sjabloon te hebben met werkende voorbeelden van elk element dat in mijn projecten wordt gebruikt. Het is gemakkelijker om iets dat werkt aan te passen, dan te proberen het werkend te krijgen.

Een accordeonmenu kan worden gebruikt als interface voor een Raspberry Pi-apparaat via een computer, pad of mobiele telefoon. Hoewel ik een Raspberry Pi met lighttpd gebruik, kan elke hardware en webserver worden gebruikt.

Elk Raspberry Pi-project zou een interface moeten hebben. Vanwege het relatief kleine schermformaat zijn mobiele telefoons het meest beperkend. Een accordeonmenu omzeilt de limieten van een telefoon door verticaal uit te vouwen (+) en samen te vouwen (-) en zoveel menu-items toe te staan als nodig zijn.

Er zijn veel voorbeelden van accordeonmenu's op internet. Omdat ik de look-and-feel van OpenHAB of OpenSprinkler leuk vind, wilde ik iets soortgelijks.

Tot nu toe waren de menu's van mijn Raspberry Pi-project heel eenvoudig. Ik heb niet veel tijd besteed aan de look-and-feel. De meeste van mijn interfaces waren alleen in HTML geschreven en gebruikten geen CSS. Ik ben geen UI-ontwerper en werken aan look-and-feel ligt buiten mijn comfortzone. Omdat ik niet vaak aan websites werk, heb ik CSS meerdere keren geleerd en vergeten. Ik wilde de look-and-feel van het menu een keer doen, het goed doen en het dan opnieuw gebruiken.

In mijn toepassingen heb ik het menu nodig om het volgende te ondersteunen:

• links naar andere websites of apparaten,
• waarden of status weergeven en
• updates van waarden toestaan.

De laatste twee vereisen meer dan HTML en CSS.

Omdat ik niet van tevoren weet hoeveel menu-items ik nodig heb, biedt een accordeonmenu de flexibiliteit om het menu naar wens uit te breiden.

Mijn opmerkingen in de CSS en HTML zijn misschien een beetje overdreven, maar ik kan de opmerkingen bekijken en weet hoe ik het menu kan wijzigen om aan mijn behoeften te voldoen zonder CSS opnieuw te leren. De opmerkingen maken het voor mij ook gemakkelijk om te begrijpen hoe de CSS de HTML beïnvloedt zonder heen en weer te schakelen tussen de twee.

Ik had nog een paar andere eisen:

• Soms verliest mijn huis internettoegang. Ik kan het menusysteem dus niet laten afhangen van links naar externe websites, waaronder externe lettertypen, API's of javascript
• Mijn familie heeft een eclectische computersmaak en gebruikt iPhone, Android, MAC's, pc's en iPads, tablets, maar ook Chrome, Firefox, Safari en IE. Het menu moet op al deze dingen draaien

Ik heb een paar weken besteed aan het uitproberen van verschillende accordeonmenu-implementaties. Ze bewerken, aanpassen en opgeven. De website, CSS Scripts, heeft een menu met meerdere niveaus dat aan al mijn vereisten voldeed en de basis vormt van dit instructable.

Stap 1: Stapsgewijze installatie

Open het terminalvenster op een MacBook of pc en voer de volgende opdrachten uit:

Vervang items in ♣'s door werkelijke waarden.

Log in op Raspberry Pi

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

Ga naar hoofddirectory

$ cd /var/www

Download index.html en wijzig de rechten en eigenaar van het bestand

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

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

Maak een map voor afbeeldingen en ga naar die map

$ mkdir img

$ cd-afbeelding

Download de afbeeldingen en verander de eigenaar.

$ 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

Maak een back-up naar de hoofddirectory en maak de css-directory en ga ernaartoe

$ cd..

$ mkdir css $ cd css

Download het stijlblad en wijzig de rechten en eigenaar van het bestand

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

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

Als je geen raspberry pi hebt, kun je deze bestanden downloaden naar een Mac of pc. Om het menu vanaf een Mac of pc uit te voeren:

• dubbelklik op index.html, of
• selecteer index.html, klik met de rechtermuisknop en open met de browser van uw keuze.

Als u een Raspberry Pi gebruikt, moet deze een webserver hebben. Open een browser op uw pc of Mac en voer in het URL-venster het volgende in:

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

Mijn server vereist een beveiligde verbinding (verwijder spaties rond de dubbele punt):

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

En het werkt!

Stap 2: Bijlage: Referenties

• CSS-script Accordeonmenu met meerdere niveaus dat alleen HTML en CSS gebruikt
• W3Schools accordeon menu
• W3Schools CSS
• W3Schools HTML

Stap 3: Bijlage: Updates

Stap 4: Bijlage: Problemen oplossen

Hier zijn enkele ideeën die kunnen helpen:

• Om HTML op te maken in php echo-statements, voegt u "\r" toe aan het einde om een return-teken in te voeren
• De groeps-id voor een submenu moet uniek zijn. Als de groeps-id van een submenu niet uniek is, worden de submenu-items in eerste instantie van de groeps-id opgenomen