So you want them multi-leveled, usability features-loaded, packed with accessibility enhancements and (most of all) interactive, right? No problem! There's an easy way to build large, feature-rich drop-down menus in Drupal 8, and I'm talking about menus with a "splash" of jQuery "magic" added to, as well: the Superfish module!
So, why should you trim down your expectations when you can meet them all?
Since the module integrates the jQurey Superfish menu plugin with your Drupal site, why shouldn't you inject extra functionality into your menus? Why shouldn't you accept the "dare" to make the switch from conventionally boring to fully interactive Drupal nice menus?
The Drupal 8 Superfish Module: What's So Special About a Superfish Menu?
“Interactivity!” Or “significantly enhanced interactivity” I should say.
But there's more! Plenty of other features and functionality which make these type of jQurey plugin-injected menus stand out:
- they're accessible to all screen readers
- they support left-to-right writing
- they adapt, automatically, even to small screen sizes
- they can be easily accessed both via keyboard and touch screens
- they can also be turned into Drupal superfish megamenus (aka “clusters” of sub-menus displayed in multiple columns)
- and I should mention here the jQuery Easing plugin aimed at making all animations more realistic
Summing up: a Drupal 8 Superfish menu is eminently usable, ideally accessible and highly interactive! Besides being drop-down and multi-leveled!
Build Your Interactive, Multi-Level Menu With The Superfish Module
1. Install The Module and Its Dependencies
First things first: get your Superfish module downloaded and installed. Next, install its whole collection of libraries, as well:
- the Superfish library 2.x for Drupal 8 comes first; remember to unzip it in your libraries directory: [DRUPAL_ROOT]/libraries directory
- next (this step isn't mandatory, yet highly recommend) download the jQuery Easing plugin, too, and uncompress it in the same libraries directory; then give this folder a suggestive name: “easing”
2. Set Up Your Menu Structure
And now, after all the downloading, unzipping and installing, it's time to create the very structure of your superfish menu:
- navigate to Structure > Menus
- next click the “+ Add menu” button
Enter your new menu's name, click “Save” and there you have it: you've just set up the “scaffolding” of your first menu built with the Superfish module!
3. Populate It With Links
Here comes the part where you populate your menu structure with links to specific pieces of content on your website:
- hit the “+ Add link” button and link each menu item to its corresponding web page on your Drupal site (keeping in mind to create your links according to the predefined menu structure)
- check the “Show as expanded” box (you'll find it under the “Description” field), ensuring, this way, that your menu will expand if it incorporates “children” menu links, as well
- remember to click “Save” with every new menu link that you create!!!
Once you've added all the links to your Drupal Superfish menu rely on their handles for moving them around, on the screen, till they perfectly match your menu's pre-established structure.
Next, just hit the “Save” button!
4. Place Your Superfish Drupal Menu
A quick note before I go on with my next step-by-step guide: menus work as block entities In Drupal 8!
And now here's how you place your menu precisely where you want it displayed on your Drupal website:
- go to Structure > Block layout
- look for the “Primary menu” field; see the “Main navigation” block right underneath it? It's a default block that you need to disable (just scroll down to “Disable” in the drop-down menu on the right side of your screen)
- then you're free to click the “Place block” button
- next just enter your Superfish menu name in the search box you have there
- and in the next “Place Block” window popping up make sure to hit the “Place block” button neighboring the “Superfish” category (instead of the button on top, the one placed in line with the “Menus” category)
5. And Last: Enjoy “Playing With” Its Lots and Lots of Configuration Options
Once you reach the “Block Settings” section of your Superfish module a whole world of configuration options opens up before your eyes!
Let me make a quick inventory (or rather “personal selection”) of the most “tempting” ones of them:
- you get to choose whether your menu will display its items horizontally (in a double row or a single row) or vertically
- you get to configure the “Slide-in effect(s)” (that the jQuery Easing plugin “injects” into your menu) from your Superfish menu
- you're enabled to set your animation speed (in “Advanced Settings”) as slow, normal or fast
- you can choose your menu style (coffee, white, blue, black etc.)
- you're free to apply a drop shadow and to add arrows, as well, if you prefer
- … to define the mouse delay
And the collection of configuration options put at your disposal is almost endless!
Once you've picked those that would define, customize and liven up your menu, just click “Save block”.
Bottom Line
This is why you should and how you can build a multi-level, interactive menu in Drupal 8 leveraging the Superfish module's superpowers. It's true that the menu you've just virtually created still needs a bit of tweaking, you still need to add your CSS to spice it up, yet the functionality is already there!
Have you tried this module already? Maybe in Drupal 7 only?