Hamburger-menu's zijn minimalistische, ruimtebesparende menu's die alleen getoond worden als bezoekers op het menu-pictogram klikken. Je kunt elk onderdeel van het hamburger-menu ontwerpen zodat het past bij de look en feel waar je klant naar op zoek is.
Voeg een hamburger-menu toe vanuit het Elementen toevoegen-paneel. Afhankelijk van de behoeften van je klant, kun je meerdere menu's aan de website toevoegen en deze afzonderlijk beheren / aanpassen.
Om een hamburger-menu toe te voegen:
- Klik links in de Editor op Elementen toevoegen
. - Klik op Menu en zoeken.
- Klik op Hamburger-menu's.
- Sleep het relevante menu naar de gewenste locatie op de pagina.
Nadat je een hamburger-menu aan de website hebt toegevoegd, kies je het menu dat wordt weergegeven. Je kunt verschillende menu's weergeven op elk afzonderlijk hamburger-menu, met context die specifiek is voor de pagina of het onderdeel waarop het zich bevindt.
Om een hamburger-menu te beheren:
- Selecteer het hamburger-menupictogram.
- Klik op Menu bewerken.
- Selecteer het verticale menu-element.
- Klik op Menu beheren.
- Klik op de dropdown onder Welk menu wordt weergegeven?
- Bestaand menu: Selecteer het door jou gekozen menu in de dropdown.
- Nieuw menu:
- Klik op Beheer van websitemenu's.
- Klik op + Nieuw menu en maak het aangepaste menu.
Nadat je een hamburger-menu hebt toegevoegd, kun je elk onderdeel ervan personaliseren zodat het past bij het uiterlijk van de website.
Om een hamburger-menu aan te passen:
- Selecteer het hamburger-menupictogram.
- Kies wat je wilt aanpassen:
Dit is de knop waarop bezoekers klikken om toegang te krijgen tot het menu.
- Ontwerp de knop: Open het Inspector-paneel om de knop aan te passen, evenals het pictogram en/of de tekst die erop wordt weergegeven.
- Stel de knop in: Klik op het Instellingen-pictogram
om te beslissen welk pictogram en/of tekst moet worden weergegeven. - Pas de indeling aan: Klik op het Indeling-pictogram
om de uitlijning van het pictogram of de tekst aan te passen. Als je zowel een pictogram als tekst weergeeft, kun je de afstand tussen beide en de positie van het pictogram instellen.
Wanneer bezoekers op het hamburger-menupictogram klikken, wordt er een container geopend. Klik op Menu bewerken om het te openen en aan te passen:
- Ontwerp de container: Open het Inspector-paneel om de achtergrondvulling te wijzigen, randen toe te voegen, de hoeken aan te passen en meer.
- Wijzig de grootte van de container: Je kunt op het Uitrek-pictogram
klikken zodat het het hele scherm in beslag neemt, of simpelweg de grootte op het canvas aanpassen. - Voeg elementen toe aan de container: Je kunt alle elementen toevoegen die je nodig hebt, zoals het logo van de klant, social media-links of een inlogbalk voor websiteleden.
- Stel de container in: Klik op het Instellingen-pictogram
om te kiezen of je een achtergrond-overlay wilt weergeven. Ook kun je kiezen om buiten de container te tikken om deze te sluiten.
Als de container slechts een deel van het scherm in beslag neemt, wordt deze omgeven door een aanpasbare overlay om bezoekers te helpen zich op het menu te concentreren.
Klik ergens op de overlay om deze te ontwerpen in het Inspector-paneel. Stel een kleur, kleurovergang of afbeeldingsvulling in, voeg randen toe, pas de hoeken aan en meer.
Dit is het daadwerkelijke menu-element. Klik op Menu bewerken en selecteer het verticale menu om het aan te passen:
- Stel het menu in: Klik op Menu beheren om de pagina's, links en submenu's te kiezen die worden weergegeven.
- Pas de indeling aan: Wijzig de uitlijning van de menu-items en de submenupijl door op het Indeling-pictogram
te klikken. - Ontwerp het menu: Open het Inspector-paneel om het ontwerp aan te passen voor twee statussen: Standaard en Geselecteerd.
Dit is de 'X'-knop waarop bezoekers klikken om het menu te sluiten. Klik op Menu bewerken en selecteer de Sluiten-knop om deze aan te passen:
- Ontwerp de knop: Open het Inspector-paneel om de knop aan te passen, evenals het pictogram en/of de tekst die erop wordt weergegeven.
- Stel de knop in: Klik op Instellingen om te beslissen welk pictogram en/of tekst moet worden weergegeven.
- Pas de indeling aan: Klik op het Indeling-pictogram
om de uitlijning van het pictogram of de tekst aan te passen. Als je zowel een pictogram als tekst weergeeft, kun je de afstand tussen beide en de positie van het pictogram instellen.