Zeven beste responsieve menu-plug-ins voor WordPress (2020)

WordPress aanbiedingen


Navigatiemenu’s zijn een essentieel onderdeel van elke succesvolle website. Simpel gezegd, ze helpen bezoekers zich te verplaatsen. Dit verbetert de doorstroming van uw website, moedigt bezoekers aan om langer op de site te blijven, meer van uw inhoud te consumeren en uw conversiedoelen te halen – al het goede dus, met andere woorden.

Meer nog, navigatiemenu’s vormen een integraal onderdeel van het algehele ontwerp van uw site – ze worden tenslotte op elke unieke pagina weergegeven. Onthoud: een visueel indrukwekkend navigatiemenu kan een gemiddelde website er geweldig uit laten zien, en het omgekeerde is zeker ook waar.

Als zodanig is het bouwen en stylen van uw navigatiemenu’s geen beslissing om lichtvaardig te ondernemen – vanuit een esthetisch of een navigatieperspectief.

Gelukkig zijn er talloze geweldige menu-plug-ins voor WordPress-gebruikers. In dit artikel zullen we ze doornemen om je onze zeven favorieten te brengen. En omdat elke plug-in in deze lijst volledig responsief is, kunnen gebruikers op mobiele apparaten er ook van genieten.

Hier gaan we dan, de zeven best reagerende menu-plug-ins voor WordPress (inclusief zowel gratis als premium plug-ins).

In willekeurige volgorde…

1. UberMenu ($ 19)

De UberMenu-plug-in

Laten we beginnen met misschien wel de krachtigste menu-plug-in van allemaal: UberMenu. Deze plug-in heeft tot nu toe meer dan 60.000 downloads opgeleverd en is waanzinnig populair en staat op de derde plaats op het scorebord voor de best verkochte plug-ins aller tijden van CodeCanyon.

Met de UberMenu-plug-in kun je enkele van de mooiste menu’s bouwen die je in de WordPress-wereld kunt vinden. Genaamd ‘megamenu’s’, ze kunnen ongelooflijk complex zijn, met onbeperkte niveaus van submenu’s waar bezoekers zich in kunnen verdiepen. Als het gaat om het verbeteren van navigatie, zijn megamenu’s ongeëvenaard.

Een screenshot van een UberMenu-megamenu.

Met UberMenu kunt u afbeeldingen, pictogrammen en beschrijvingen toevoegen aan menu-items.

Het belangrijkste verkoopargument van de plug-in is de geavanceerde inhoud die u aan uw megamenu’s kunt toevoegen. Om te beginnen omvat dit afbeeldingen, Google Maps en blogpostrasters. UberMenu kan zelfs dynamisch bloginhoud voor deze rasters ophalen, gebaseerd op een variabele naar keuze – de variabele kan bijvoorbeeld de berichtcategorie, het berichttype, de ouder of de auteur zijn. De plug-in voegt ook automatisch de aanbevolen afbeelding van de berichten toe aan de rasters, zodat de menu’s er altijd goed uitzien.

Daarnaast integreert UberMenu ook met widgets en shortcodes van derden. Dit betekent dat u functionaliteiten van andere plug-ins in uw menu’s kunt opnemen, voor een nog betere bezoekerservaring.

Een screenshot van een Google Map en Contactformulier opgenomen in een UberMenu

U kunt UberMenu gebruiken om kaarten en contactformulieren aan uw menu’s toe te voegen.

Zoals je zou verwachten van een plug-in die design benadrukt, wordt UberMenu geleverd met veel aanpassingsmogelijkheden. Deze omvatten 25 van de meest populaire Google-lettertypen, evenals lettergroottes en oneindige kleuren. U kunt voor elk menu-item ook een aangepaste achtergrondafbeelding uploaden.

Met zo’n veelzijdigheid zou het je vergeven zijn te denken dat deze menu’s moeilijk te construeren zijn. Dit is echter niet het geval dankzij de intuïtieve bouwer van de plug-in.

Met de builder kunt u uw menu’s maken met responsieve rasters met maximaal 12 kolommen, die u kunt vullen met inhoudsblokken. Om deze blokken aan te passen, klikt u gewoon op de gewenste blokken en UberMenu zal de beschikbare opties oproepen. Je kunt ook zien hoe je menu in realtime tot leven komt vanuit de WordPress Customizer – deze live preview-functie is van onschatbare waarde.

UberMenu creëert een veelzijdig scala aan menutypes en submenu’s. Je kunt het zelfs verzachten om old-school flyout-menu’s te bouwen.

Een screenshot van een UberMenu-flyout

Gebruik UberMenu om meer traditionele menu’s te maken door de flyout-optie te selecteren.

Of u kunt er alles aan doen om verschillende van deze opties in één menu te mixen en matchen – de hele keet.

Een screenshot van een UberMenu met alle verschillende inhoudstypen.

Of gebruik de volledige mogelijkheden van UberMenu en combineer flyouts, talloze achtergrondafbeeldingen en een reeks inhoudscategorieën.

De resultaten zijn werkelijk verbluffend, toch? En u kunt uw menu’s zelfs verticaal uitlijnen, als u dat wilt. Deze menu’s ondersteunen dezelfde kenmerken en functionaliteiten, maar met een verticale uitlijning.

Een screenshot van een verticaal menu gebouwd met UberMenu.

Wilt u ruimte boven aan het scherm besparen? Plaats uw UberMenu langs de zijkant van de pagina zonder verlies van functies.

Hoewel UberMenu volledig responsief is, kan het ingewikkelde ontwerp van de megamenu’s ze minder geschikt maken voor kleinere apparaten. Als u denkt dat dit het geval is, hebben de UberMenu-ontwikkelaars gebruikers een gratis mobiele menu-plug-in verstrekt: ShiftNav. Hiermee kunt u navigatiemenu’s in app-stijl bouwen voor mobiele gebruikers.

Ten slotte is het de moeite waard erop te wijzen dat de ontwikkelaars vanwege de niet te stoppen populariteit van UberMenu vier officiële extensies hebben uitgebracht.

  • UberMenu Icons-extensie – introduceer meer dan 600 FontAwesome-pictogrammen in uw menu’s.
  • UberMenu Flat Skins-pakket – 30 nieuwe skins voor je menu’s.
  • UberMenu Conditionals-extensie – voorwaardelijke logica voor uw megamenu’s.
  • UberMenu kleverige extensie – verankert de menu’s bovenaan het scherm.

Extensies zijn beschikbaar voor $ 8 per stuk of als een bundel van $ 19.

2. Max Mega Menu (GRATIS)

Max Mega Menu Plugin

De functionaliteit van ‘Mega-menu’ is relatief geavanceerd, wat betekent dat u deze meestal alleen zult vinden in premium plug-ins. Als je echter weet waar je moet zoeken, is het mogelijk om het gratis te vinden.

Introductie van Max Mega Menu, een uitstekende mega-menu-plug-in die beschikbaar is in de officiële WordPress-plug-in-repository. Met de plug-in geïnstalleerd en geactiveerd, worden uw bestaande WordPress-menu’s automatisch geüpgraded naar megamenu’s.

Een screenshot van een Max Mega Menu met enkele afbeeldingen.

De megamenu’s die je kunt bouwen zien er prachtig uit – niet slecht voor een gratis plug-in!

Het bouwen van uw menu’s is eenvoudig dankzij de drag-and-drop-builder. U kunt ze ook in realtime bekijken en zo onmiddelijk stylingbeslissingen nemen.

Over styling gesproken, Max Mega Menu wordt geleverd met bijna eindeloze aanpassingsmogelijkheden. Lettertypen, formaten, kleuren en pictogrammen zijn slechts het topje van de ijsberg, met meer dan 100 ondersteunde aanpassingen. Er zijn ook een aantal fantastische CSS3-animaties ingebouwd, waardoor uw menu’s nog gemakkelijker worden.

Zoals met elke mega-menu-plug-in, kunt u ook een aantal behoorlijk gecompliceerde menu’s bouwen. Je kunt er heel veel coole dingen aan toevoegen, inclusief afbeeldingen en dynamische inhoud (zoals kaarten), en omdat je met Max Mega Menu widgets aan je menu’s kunt toevoegen, kun je zelfs functionaliteit van andere plug-ins integreren. Dit betekent dat u functionaliteit kunt opnemen zoals agenda’s, video’s en contactformulieren.

Een screenshot van een Max Mega Menu met kalender, contactformulier en kaart.

De schermafbeelding toont slechts enkele van de widgets die u aan uw menu’s kunt toevoegen.

Het beste van alles is dat Max Mega Menu een van de snelste plug-ins voor megamenu’s is, met een gewicht van minder dan 2 kb en met de stijlen beperkt tot één CSS-bestand.

Als je het leuk vindt wat je ziet, overweeg dan om te upgraden naar de Pro-versie voor slechts $ 19. Met de Pro-versie kun je onder andere WooCommerce en Easy Digital Download-afrekenfuncties aan je menu’s toevoegen.

3. Superfly ($ 22)

De Superfly-plug-in

Als je de voorkeur geeft aan verticale menu’s boven de traditionele horizontale uitlijning, bekijk dan de Superfly-plug-in. Het doet ook dienst als een fantastische ruimtebesparing, zodat u de volledige afmetingen van het scherm kunt gebruiken.

Dit wordt bereikt door het menu te verbergen achter een schakelknop in de bovenhoek. Wanneer erop wordt geklikt, schuift het menu in beeld, waardoor bezoekers vrij kunnen navigeren op uw website – u kunt er ook voor kiezen om het menu permanent aan de zijkant van het scherm te verankeren, hoewel.

Waarom zou je een verticaal uitgelijnd menu willen? Nou, om te beginnen worden ze als mobielvriendelijker beschouwd. Ook kom je ze minder vaak tegen, waardoor ze een opvallende aanvulling zijn op elke website. En, zoals je zou verwachten, ondersteunt Superfly een overvloed aan stylingopties, die je helpen dit ongebruikelijke menutype nog opvallender te maken.

Een screenshot van een links uitgelijnd Superfly-menu

Superfly-menu’s schuiven vanaf de zijkant van het scherm in beeld.

De plug-in wordt geleverd met een pictogrammenbibliotheek, tonnen Google-lettertypen en volledige kleuraanpassing. U kunt ook aangepaste afbeeldingen voor uw menu’s uploaden – van een achtergrondafbeelding tot het logo dat bovenaan in het menu wordt weergegeven. U kunt ook widgets of shortcodes van andere plug-ins integreren of aangepaste HTML-styling maken. U kunt zelfs het ontwerp, de vorm en de plaatsing van de menuknop aanpassen.

Omdat de menu’s uitkomen in het scherm, worden maximaal vier niveaus van submenu’s ondersteund. Extra niveaus zien er even verbluffend uit en kunnen worden geconfigureerd met een unieke styling, zoals te zien is in de onderstaande schermafbeelding.

Een screenshot met een Superfly-submenu

Met Superfly kunt u unieke ontwerpen maken voor elk subniveau van uw menu.

Omdat deze eigenzinnige menu’s mogelijk niet voor elke situatie geschikt zijn, biedt Superfly verschillende configuraties voor paginatargeting. Hier kunt u ervoor kiezen om Superfly-menu’s uit te schakelen voor bepaalde gebruikersgroepen – bijvoorbeeld desktopgebruikers – of op specifieke pagina’s.

Nog een laatste functie: u kunt ook knoppen voor sociaal delen toevoegen aan de onderkant van uw menu’s, met meer dan tien sociale netwerken ondersteund. Met een beetje geluk resulteert dit in meer sociale shares voor uw inhoud.

4. Responsief menu (GRATIS)

Responsieve menu-plug-in

Als je van de verticale menu’s van Superfly houdt maar niet over het budget beschikt, is de plug-in voor het responsieve menu wellicht interessant voor je. Deze plug-in maakt fantastische verticale menu’s en kan gratis worden gedownload vanuit de officiële plug-in-directory.

Voor een gratis plug-in wordt Responsive Menu geleverd met een indrukwekkend aantal aanpassingen – meer dan 150 zelfs. Deze omvatten alle gebruikelijke aanpassingen – lettertype, grootte, uitlijning en kleur – en u kunt ook aangepaste achtergronden, logo’s en pictogrammen uploaden, zodat u uw menu’s een persoonlijk tintje kunt geven.

Een screenshot van een menu dat is gebouwd met Responsive Menu

U kunt achtergrondafbeeldingen en een zoekbalk aan uw menu’s toevoegen.

De plug-in verankert een eenvoudige menuknop in de rechterbovenhoek van het scherm en wanneer op deze knop wordt geklikt, schuift het menu in beeld met een prachtig animatie-effect. Omdat de menu’s veel meer van het scherm in beslag nemen in vergelijking met Superfly, wordt elk volgend niveau naar beneden geopend in plaats van naar buiten, zoals te zien is in de volgende schermafbeelding.

Een screenshot met submenu's met Responsive Menu

Wanneer erop wordt geklikt, worden submenu-items naar beneden geopend in plaats van naar buiten.

Andere handige functies zijn onder meer de zoekfunctionaliteit voor uw menu’s en de mogelijkheid om te selecteren op welke schermformaten de menu’s worden weergegeven.

Als je van de gratis versie houdt, is er een Pro-versie van $ 14,99 beschikbaar, die een live preview-functionaliteit, FontIcons en geanimeerde menu-items introduceert.

5. Hero Menu ($ 19)

Hero Menu Plugin

We zijn weer terug bij megamenu’s met onze volgende plug-in: Hero Menu. De plug-in biedt veel veelzijdigheid en tal van aanpassingsmogelijkheden, wat betekent dat het mogelijk is om bijna eindeloze menuontwerpen te maken.

Hero Menu wordt geleverd met meer dan 250 gratis pictogrammen en je kunt je menu’s aanpassen met een keuze uit 650 Google-lettertypen en oneindige kleuren. Om degenen onder u te helpen die een natuurlijke flair voor design missen, vindt u ook 60 verbluffende kleurvoorinstellingen, gemaakt door een team van bekwame grafische ontwerpers.

Een screenshot van Hero Menu

Kijk naar alle coole content die je aan een Hero Menu kunt toevoegen

De plug-in maakt het bouwen van menu’s ook een fluitje van een cent dankzij de gestroomlijnde aangepaste interface. Alles is drag-and-drop, zodat u diepte aan uw menu’s kunt toevoegen, menu-items opnieuw kunt ordenen en het ontwerp gemakkelijk kunt aanpassen.

Hero Menu ondersteunt alle gebruikelijke megamenu-inhoud – afbeeldingen, video’s, kaarten en bloginhoud, plus shortcodes en widgets van andere plug-ins. Hero Menu is echter ook compatibel met WooCommerce, wat betekent dat je producten, prijzen en miniatuurafbeeldingen aan je menu’s kunt toevoegen. U kunt ook eenvoudig een zoekfunctie en knoppen voor het delen van sociale media activeren.

Een screenshot met WooCommerce en Hero Menu-integratie

U kunt zelfs WooCommerce-producten aan uw menu toevoegen.

De plug-in wordt ook geleverd met ‘sticky menu’ functionaliteit, wat betekent dat hij verankerd blijft aan de bovenkant van het scherm, zelfs als een bezoeker naar beneden scrolt. En wanneer Hero Menu bezoekers detecteert die kleinere apparaten gebruiken, worden de menu’s automatisch gecomprimeerd tot iets mobielers.

Ten slotte zal Hero Menu aanpassen welk menu een bezoeker ziet, afhankelijk van zijn WordPress-gebruikersrol – een handige functie als je bezoekers nodig hebt om in te loggen.

6. WP Responsive Menu (GRATIS)

De WP Responsive Menu-plug-in

Nog een freebie volgende: de WP Responsive Menu-plug-in, die gespecialiseerd is in het bouwen van glijdende mobiele menu’s.

Omdat de plug-in is gericht op mobiele gebruikers, zijn veel van de belangrijkste functies specifiek afgestemd op functionaliteiten op mobiele apparaten. Bezoekers kunnen door de menu’s navigeren met veegbewegingen, en ze kunnen op hun touchscreens knijpen om in te zoomen.

U kunt ook een specifiek mobielvriendelijk menu configureren voor bezoekers op kleinere apparaten en ongewenste elementen uitschakelen. Bezoekers op het bureaublad zien het standaardmenu, met de volledige lijst met opties.

Een screenshot van de WP Responsive Menu-plug-in

U kunt de menu’s configureren om uit te schuiven vanaf de boven-, linker- of rechterkant van het scherm. U kunt ook de breedte van de menu’s specificeren – in pixels of als percentage van de schermgrootte.

Er zijn ook tal van aanpassingsmogelijkheden. U kunt een logo voor het menu uploaden en alle kleuren (achtergrond, tekst en randen) en de menutekst aanpassen. U kunt zelfs een eenvoudige zoekfunctie onderaan het menu opnemen.

Het beste van alles is dat de installatie ongelooflijk gestroomlijnd is, wat betekent dat u binnen een paar minuten aan de slag kunt.

7. WP Floating Menu Pro ($ 17)

De WP Floating Menu Pro-plug-in

De laatste plug-in die op de lijst van vandaag staat, is een andere interessante: WP Floating Menu Pro. Zoals de naam al aangeeft, maakt de plug-in ‘zwevende’ menu’s en ze zien er geweldig uit.

De plug-in heeft twee soorten menu’s:

  • navigatie van één pagina
  • kleverige menu’s – dit type menu linkt naar meerdere URL’s, zoals een typisch WordPress-menu.

Geen enkele andere plug-in in deze lijst biedt navigatie van één pagina, dus laten we ons daarop concentreren. De navigatiefunctie van één pagina is gericht op, u raadt het al, websites die op één pagina zijn gebouwd. Deze websites zijn meestal opgesplitst in verschillende secties – u kunt bijvoorbeeld een sectie Over ons of een contactformulier vinden.

Een screenshot van WP Floating Menu Pro

Door op de pictogrammen aan de rechterkant te klikken, kunnen bezoekers naar elk deel van een website van één pagina springen.

Met navigatiemenu’s van één pagina, wanneer een bezoeker op een van de pictogrammen klikt, ‘springt’ hij automatisch naar dat deel van de pagina. Dit betekent dat het menu wordt gebruikt om op en neer te navigeren op de pagina, rechtstreeks naar de sectie die de bezoeker wil – een ‘inline’ menu. Klinkt goed, toch?

Naast deze nogal intrigerende functionaliteit, wordt WP Floating Menu Pro geleverd met tal van aanpassingsstijlen. Om te beginnen zijn er 13 vooraf gemaakte sjablonen, met een reeks knopstijlen, kleurenschema’s en animatie-effecten. Elke sjabloon is echter volledig aanpasbaar – bovendien kunt u uw eigen stijl helemaal zelf bouwen, zodat u uw menu’s kunt aanpassen aan de stijl van uw site.

Met kleinere knoppen in deze menu’s zijn pictogrammen een belangrijk ontwerpelement en de plug-in wordt geleverd met drie sets: Dash-pictogrammen, FontAwesome-pictogrammen en Algemene pictogrammen. WP Floating Menu Pro wordt ook geleverd met mobielvriendelijke menu’s, die u met één druk op de knop kunt activeren.

Laatste gedachten

Dit concludeert onze verzameling van de best reagerende menu-plug-ins voor WordPress. De plug-ins in deze lijst ondersteunen verschillende menutypes: megamenu’s, verticale menu’s, mobielvriendelijke menu’s en menu’s van één pagina.

Welke is geschikt voor uw website? Dat hangt ervan af. Het kiezen van de juiste menu-plug-in is een belangrijke beslissing, aangezien menu’s een belangrijke functie vervullen – navigatie – en een fundamenteel onderdeel zijn van de esthetiek van uw site. Met andere woorden, neem de tijd en zorg ervoor dat u deze beslissing goed neemt.

Persoonlijk ben ik dol op de stijl van megamenu’s – ze trekken de aandacht en je kunt er veel coole dingen aan toevoegen. Ze zijn echter waarschijnlijk het meest geschikt voor websites met veel verschillende pagina’s; websites waar een echt uitgebreid navigatiemenu vereist is.

Aan de andere kant zijn de menu’s in verticale stijl ideaal voor websites die het ruimtegebruik moeten maximaliseren. Het menu is verborgen achter een schakelaar, wat betekent dat uw inhoud het hele scherm vult – perfect voor websites met een afbeelding of video op volledig scherm.

Met gratis plug-ins in elke categorie, is mijn aanbeveling om een ​​paar verschillende menustijlen te proberen om te zien welke je voorkeur heeft. Als u vervolgens weet welke stijl u bevalt, evalueert u enkele van de premium-opties om te bepalen welke plug-in u in de toekomst gaat gebruiken. Met veel extra functies en functionaliteiten, zijn de premium-opties echt een stuk beter dan de gratis.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me