Drupal Nice Menus en Superfish — beschrijving en vergelijking van dropdownmenu-modules
De modules Nice Menus en Superfish maken het mogelijk om dropdownmenu’s te creëren — zowel verticaal als horizontaal. Je hoeft slechts één van deze modules te kiezen en te gebruiken. Beide modules zijn populair en beschikken over een groot aantal aanvullende extensies.
De modules Nice Menus en Superfish gebruiken dezelfde jQuery-bibliotheek — Superfish:
https://www.drupal.org/project/nice_menus
https://www.drupal.org/project/superfish
https://github.com/mehrpadin/Superfish-for-Drupal
Laten we beginnen met Nice Menus.
Nice Menus
Het menu via Nice Menus wordt automatisch aangemaakt na het inschakelen van de module. Activeer de module — er is geen extra handeling nodig, de bibliotheek is al inbegrepen (vandaar de naam: “Nice” Menus).
Ga vervolgens naar de blokinstellingen. Daar vind je meerdere Nice Menus-blokken. Kies het eerste:
Hier kun je selecteren welk menu moet worden weergegeven en op welke manier. In dit voorbeeld is er slechts één menu, Management, met subniveaus dat als dropdown kan worden getoond.
Let op de instelling Respect "show as expanded" option — hiermee worden alle menu-items standaard uitgeklapt. Dit zorgt ervoor dat subitems altijd zichtbaar zijn, niet alleen nadat een bovenliggend item is geselecteerd.
Je kunt het menu ook naar beneden laten uitklappen door de oriëntatie in te stellen op Down:
Nu zal het menu naar beneden uitvouwen:
De instellingen van Nice Menus zijn beperkt:
/admin/config/user-interface/nice_menus
Je kunt hier enkel de snelheid en vertraging van het uitklappen instellen. Persoonlijk geef ik de voorkeur aan snelle opening, dus stel ik het meestal zo in:
En dat is het — je hebt nu een dropdownmenu. Nice Menus is snel en eenvoudig te configureren.
Drupal Superfish
De Superfish-module kost iets meer tijd om te installeren, maar het resultaat is een flexibeler en veelzijdiger menu met meer aanpassingsmogelijkheden.
Hiervoor heb je de Superfish-bibliotheek voor Drupal nodig — de specifieke Drupal-versie. In de modulebeschrijving staat hierover meer informatie:
https://github.com/mehrpadin/Superfish-for-Drupal
Als je de module Libraries API nog niet hebt geïnstalleerd, doe dat dan eerst:
https://www.drupal.org/project/libraries
Download vervolgens de juiste versie (bijv. 1.0) en plaats de bibliotheek in de map sites/all/libraries/superfish:
Installeer ook de module jQuery Update:
https://www.drupal.org/project/jquery_update
In de instellingen van jQuery Update wordt aanbevolen om voor de frontend versie 1.7 te gebruiken en voor het beheergedeelte 1.5 (om problemen met Views te voorkomen):
/admin/config/development/jquery_update
Nu kun je de Superfish-module inschakelen. Controleer in het statusrapport of de Superfish-bibliotheek correct is gedetecteerd:
/admin/reports/status
Ga daarna naar de blokbeheerpagina en activeer één van de Superfish-blokken:
/admin/structure/block
Hier heb je veel meer configuratiemogelijkheden. Laten we deze stap voor stap bekijken:
Op deze pagina kun je bepalen welk menu wordt weergegeven (Management), de oriëntatie van het dropdownmenu (horizontaal — links of rechts), het kleurenschema (bijv. Blue), en de snelheid en vertraging van het uitklappen.
De overige instellingen zijn standaard. Je kunt eventueel de jQuery Easing-plug-in installeren voor extra animatie-effecten, maar ook zonder werkt Superfish uitstekend.
Kies een regio voor het menu en bekijk het resultaat. De rest van de instellingen bespreken we verderop:
Bij mij werkt alles perfect. Als er iets misgaat, laat het weten in de reacties.
Nu het leukste deel van Superfish — de responsiviteit. Op mobiele apparaten verschijnt het menu als een keuzelijst, wat het navigeren op telefoons vergemakkelijkt.
Daarnaast werkt het menu ook op touchscreen-apparaten, zowel de mobiele als de standaardversie. Hiervoor zijn extra plug-ins beschikbaar, die standaard al zijn geconfigureerd, dus je hoeft niets aan te passen:
Concluderend: Superfish biedt duidelijk meer functionaliteit dan Nice Menus, maar Nice Menus is eenvoudiger en sneller te installeren. Als je kiest voor Nice Menus, kun je de volgende modules gebruiken om je menu responsief te maken:
https://www.drupal.org/project/responsive_menus
https://www.drupal.org/project/mobile_navigation