Hoe het mobiele menu in Webflow te bewerken

Een eenvoudig en intuïtief navigatiemenu is een van de meest essentiële ontwerpelementen van uw website. Het werkt als een kaart en leidt uw bezoekers verder dan de startpagina. Met het toenemende aantal mensen dat internet op hun mobiele apparaten gebruikt, moet uw website ook een mobielvriendelijk navigatiemenu hebben.

Gelukkig heeft Webflow het gemakkelijk gemaakt om een ​​inklapbare hamburgermenubalk toe te voegen die je mobiele site zal stroomlijnen. Blijf lezen om te leren hoe u dit mobiele menu op Webflow kunt bewerken.

Hoe een navigatiebalk toe te voegen

Het hamburgermenu is een essentieel ontwerpelement bij het werken met beperkte horizontale ruimte. Het elimineert de behoefte aan een omvangrijke vaste navigatiebalk die waardevolle ruimte in beslag neemt.

Op Webflow zijn dit menu en zijn functionaliteiten ingebouwd in het NavBar-element. Om dit element aan uw ontwerp toe te voegen, zijn vier eenvoudige stappen nodig:

1. Tik op het pictogram "+" bovenaan het linkerpaneel om het paneel "Toevoegen" te openen.
   
2. Scrol omlaag naar het gedeelte 'Componenten'.
   
3. Klik en houd het element "NavBar" ingedrukt.
   
4. Sleep het element naar de kop van de pagina.
   

Hoe het mobiele menu te bewerken

Nadat u een navigatiebalk aan uw website heeft toegevoegd, zijn er verschillende manieren waarop u stijl en persoonlijkheid aan dit menu kunt toevoegen.

Hoe meer links aan het menu toe te voegen

Het navigatiebalkelement bevat de menuknop en het navigatiemenu, waarbij de laatste de navigatielinks bevat. Wanneer u het aan uw ontwerp toevoegt, zijn er verschillende tijdelijke aanduidingen voor links die u kunt verwijderen of bewerken met uw websitelinks.

Volg deze stappen om meer navigatielinks toe te voegen:

1. Klik op een willekeurig element in de navigatiebalk.
   
2. Ga naar het paneel "Elementsinstellingen" aan de rechterkant.
   
3. Druk op het tandwielpictogram om de "Instellingen" te openen.
   
4. Scrol naar het gedeelte "NavBar-instellingen".
   
5. Tik op de knop "Link toevoegen".
   

Nu u voldoende links heeft voor al uw relevante webpagina's, is het tijd om daadwerkelijk te linken.

1. Selecteer een navigatielink.
2. Ga naar het paneel "Elementeninstellingen".
   
3. Zoek het gedeelte "Link-instellingen".
   
4. Voer de aangewezen webpagina-URL in het veld "URL" in.
   

Menu-animatie wijzigen

Op Webflow kunt u ook wijzigen hoe het mobiele menu wordt weergegeven wanneer bezoekers op de menuknop klikken. U kunt kiezen uit drie typen van deze onthullingsanimaties:

• Drop Down – Standaard zal het mobiele menu uit de NavBar vallen zodra de bezoeker op de menuknop tikt. Het neemt de breedte van het browservenster in zijn geheel in beslag.
• Boven rechts - Als u deze onthullingsanimatie selecteert, verschijnt uw mobiele menu aan de rechterkant van het scherm. Dit menu neemt de hoogte van het hele browservenster in beslag.
• Boven links - Dit menutype is identiek aan Boven rechts, behalve dat het navigatiemenu vanaf de linkerkant van uw scherm wordt verplaatst.

Ga als volgt te werk om de gewenste onthullingsanimatie in te stellen:

1. Selecteer een element in de navigatiebalk.
   
2. Ga naar het paneel "Elementsinstellingen" aan de rechterkant van uw scherm.
   
3. Tik op het tandwielpictogram om 'Instellingen' te starten.
   
4. Navigeer naar het gedeelte "NavBar-instellingen".
   
5. Klik op de optie "Type".
   
6. Selecteer de gewenste stijl in het vervolgkeuzemenu.
   

In het gedeelte "NavBar-instellingen" kunt u ook het volgende regelen:

• Easing open: het curvetype dat wordt gebruikt om de open overgang te animeren.
• Easing close: het curvetype dat wordt gebruikt om de close-overgang te animeren.
• Duur: hoe lang het duurt voordat het menu verschijnt.

Merk op dat de overgangsduur wordt gemeten in milliseconden.

Menustijl wijzigen

Webflow maakte het gemakkelijk om elk deel van de navigatiebalk te stylen, zodat u het mobiele menu naadloos in uw website-ontwerp kon passen.

Ga als volgt te werk om de menuknop op te maken:

1. Selecteer de menuknop.
   
2. Ga naar het paneel "Stijl" aan de rechterkant (het penseelpictogram).
   

Met het deelvenster Stijl kunt u elk aspect van de menuknop wijzigen. Meestal veranderen ontwerpers de achtergrondkleur en grootte van de knop.

Ga als volgt te werk om de achtergrondkleur te wijzigen:

1. Ga naar het gedeelte 'Achtergronden'.
   
2. Tik op het kleurdruppelpictogram om de "Kleurkiezer" te openen.
   
3. Selecteer de gewenste kleur.
   

Volg deze stappen als u de grootte van het hamburgerpictogram wilt wijzigen:

1. Navigeer naar het gedeelte "Typografie".
   
2. Vergroot of verklein de pictogramgrootte in het veld "Aa".
   

U kunt ook de kleur van het pictogram wijzigen in het bovenstaande veld, gemarkeerd door de letter A en een kleurdruppel.

Hoewel er veel manieren zijn om de menuknop aan te passen, kunt u deze niet vervangen door een tekstelement of een aangepaste afbeelding.

Mobiele navigatie gemakkelijk gemaakt

Bij het ontwerpen van een mobiele menukaart wil je het maximale uit de vrij beperkte ruimte halen. Probeer het menu dus niet te overspoelen met opties om verwarring bij uw bezoekers te voorkomen. Zorg er ook voor dat de menukeuzes kort, duidelijk en gemakkelijk leesbaar zijn.

Daarna kunt u spelen met de menustijl en animatie om uw bezoekers bij elke stap geïnteresseerd te houden.

Heb je geprobeerd een mobiel menu aan je website toe te voegen? Hoeveel opties heb je opgenomen? Laat het ons weten in de comments hieronder.