Superfish

By KF Cheng on Mon, 08/10/2020 - 01:32
Drupal Versions
D7
D8
D9
For Installation
Official Link to Module
https://www.drupal.org/project/superfish
Links for Dependencies
Superfish library 2.x (for D8)
Superfish library 1.x (for D7)
Module: jQuery Update (for D7 only)
Module: Behavior Weights (for D7 only)
General

By default, the menu display of website is linear in general, lined up either horizontally or vertically in a straight line.  The disadvantage is that, it can take up a lot of space in one direction over screens with limited space.  Dropdown Menu is a natural and common solution for this, especially on a desktop version.  The dropdown menu allows a hierarchy in the navigation in a flexible manner that can fit the habital or logical mind of the users.

This Superfish is one of the modules supporting dropdown menus.  Note that Superfish requires support of the theme being used on the system.  An external library and JQuery is needed for the installation.  In Drupal 7, it requires the JQuery Update module to be installed.

It is different between Drupal 7 & 8.  See below.

It is different between Drupal 7 & 8.  See below.

INSTALLATION

  1. Install the Superfish module
  2. Download the library from https://github.com/mehrpadin/Superfish-for-Drupal/archive/2.x.zip and extract the library to become /libraries/superfish
  3. Enable the downloaded modules
  4. Check out the Status Report for the installation for any errors

HOW TO USE

  1. Go to Block Layout and place the block by searching for the name of the menu
  2. If Superfish is installed, you will find 2 versions of menu available, one of which is Superfish
  3. There are configuration settings that can be modified, including the color and style desired, and the responses under mobile and screen sizes
  4. If menu items need to be modified, do it at the menu it represents.

 

INSTALLATION

  1. Install the Superfish module
  2. Install the JQuery Update module, and the JQuery setting requires to be 1.6.1 or higher
  3. Install the Behavior Weights module
  4. Download the library from https://github.com/mehrpadin/Superfish-for-Drupal/archive/1.x.zip and extract the library to become /sites/all/libraries/superfish
  5. Enable the downloaded modules
  6. Check out the Status Report for the installation for any errors

HOW TO USE

  1. After installation, by default 4 superfish menus will be available.  This number can be increased if more superfish menus are needed
  2. Go to Block Layout, locate the Superfish Menu, and place it under the desired region to replace the original menu.
  3. There are configuration settings that can be modified, including the color and style desired, and the responses under mobile and screen sizes
  4. For changes in the menu items, just go back to the original menu which it replaces.

 

Recommendation
Good to Have