header-logo
Hoe Wix gebruiken om je website en bedrijf te bouwen.
Ontwerp en beheer je website met slimmme functionaliteiten.
Beheer abonnementen, pakketten en facturen.
Run je bedrijf en kom in contact met leden.
Lees hoe je een domein koopt, koppelt of overzet.
De juiste tools om je bedrijf op het web te laten groeien.
Boost je zichtbaarheid met SEO en marketingtools.
Geavanceerde functies om efficiënter te kunnen werken.
Antwoorden op vragen, gekende problemen en meer.
placeholder-preview-image
Verbeter je vaardigheden met onze cursussen en video's.
Krijg tips voor webdesign, marketing en meer.
Lees hoe het organische websiteverkeer van zoekmachines te vergroten.
Bouw een eigen website met ons full-stack platform.
Vind een professional voor hulp om je websitedoelen te behalen.
placeholder-preview-image
In dit artikel
  • Een hamburger-menu toevoegen
  • Een hamburger-menu aanpassen
  • Menu-pictogram
  • Menu container
  • Pictogram 'Menu Sluiten'
  • Verticaal menu
  • Meerdere hamburger-menu's maken met behulp van lightboxen
  1. Home
  2. Editor X: Hamburger-menu's gebruiken

Editor X: Hamburger-menu's gebruiken

7 min
In dit artikel
  • Een hamburger-menu toevoegen
  • Een hamburger-menu aanpassen
  • Menu-pictogram
  • Menu container
  • Pictogram 'Menu Sluiten'
  • Verticaal menu
  • Meerdere hamburger-menu's maken met behulp van lightboxen
Hamburger-menu's zijn minimalistische, ruimtebesparende menu's die alleen getoond worden als bezoekers op het menu-pictogram klikken. Pas het ontwerp van je hamburger-menu aan de vormgeving van je site aan. Je kunt ook kiezen of het opent als een zijbalk of als een schermvullend menu. 

Lees hoe je:

Een hamburger-menu toevoegen

  1. Klik linksboven in de Editor op Toevoegen.
  2. Klik op Menu en zoeken.
  3. Klik op Hamburger-menu's.
  4. Sleep het betreffende menu naar de gewenste plaats op je pagina. 
  5. (Optioneel) Maak een nieuw menu aan met aangepaste pagina's:
    1. Klik het menu-pictogram en selecteer Menu openen.
    2. Kies het verticale menu dat je pagina's weergeeft.
    3. Klik op Menu beheren. 
    4. Klik op de dropdown onder Welk menu wordt weergegeven?
    5. Klik op Websitemenu's beheren.
    6. Klik onderaan op + Nieuw menu toevoegen om het aangepaste menu te maken.

Een hamburger-menu aanpassen

Nadat je een hamburger-menu aan je website hebt toegevoegd, kun je het personaliseren door de onderstaande elementen aan te passen. 

Menu-pictogram

Pas de knop aan waarop bezoekers klikken om het hamburger-menu te openen. Klik op het Ontwerp-pictogram om de vulkleur, rand en schaduw van de knop aan te passen. Je kunt ook op Basisvorm wijzigen klikken om een ander pictogram te selecteren.

Menu container

Open de container met je menu door op het menupictogram te klikken en Menu openen te selecteren.
Selecteer vervolgens de menucontainer en pas deze aan door het volgende te doen:

Pictogram 'Menu Sluiten'

Pas het pictogram aan waarop bezoekers klikken om het menu te sluiten. Standaard verschijnt het X-pictogram in de rechterbovenhoek van je menucontainer, maar je kunt het altijd naar wens verplaatsen. 
Klik in het Inspector-paneel op het Ontwerp-pictogramom de vulkleur, rand en schaduw van de knop aan te passen. Je kunt ook op Basisvorm wijzigen klikken om een ander pictogram te selecteren.  

Verticaal menu

Dit is het daadwerkelijke menu-element. Klik op Menu beheren om de pagina's, links en submenu's te kiezen die worden weergegeven. Wijzig vervolgens de uitlijning van je menu-items en de submenupijl door op het Indelingen-pictogramte klikken.
Klik in het Inspector-paneel op het Ontwerp-pictogramom het menu te ontwerpen voor twee statussen: Standaard en Geselecteerd, voor wanneer een bezoeker een menu-item selecteert. 

Meerdere hamburger-menu's maken met behulp van lightboxen

De container van je hamburger-menu wordt beschouwd als een Master-onderdeel, wat betekent dat je slechts één hamburger-menu per website kunt maken. Je kunt echter een soortgelijk effect bereiken door een lightbox toe te voegen die een aangepast verticaal menu weergeeft. 
Selecteer hieronder een optie voor meer informatie:

Vond je dit artikel nuttig?

|

Helpmate

Hallo,

Een beetje meer begeleiding nodig?
Samenvatting van dit artikel
Unlock personalized helpLog in to get the most out of Helpmate.