Adding Drop-down Menus

YaleSites now provides the ability to create drop-down options from the Main Menu using the Superfish Module. The instructions are intended for use with YaleSites Templates and provide you with the necessary steps to ensure your menus display properly in browsers and modern devices, including iPads, mobile and tablets. The CSS included ensures the menus are styled and colors coordinated with the chosen highlight color.

Configuring Superfish | Configuring the Block

  1. Enable the Superfish module - Modules > Superfish.
  2. Configure the Superfish Module
    • Configuration > User interface > Superfish
    • Set the number of blocks to 1. DO NOT change the default Paths.
  3. Configure the Superfish 1 Block
    • ​Click on configure to the right of the Superfish Block.
    • Set the block title to <none>.
    • Scroll down to Superfish Settings.
      • ​Leave the Style selector set to –None-.
      • then and change ONLY these settings.
        • Deselect Drop Shadows.
        • Scroll down and click on Advanced and change the Mouse Delay to 300 milliseconds.
  4. Superfish Plugins
    • Enable HoverIntent, but disable the other checkboxes.
    • Click on the 4th radio button Enable jQuery sf-Touchscreen plugin for this menu depending on the user’s Web browser user agent to enable the plugin depending on the detected user agent.
    • Under Select Behavior, select the 1st radio button for Opening the Parent menu item on the second tap.

       
    • Click on Window Width Settings, change the breakpoint to 740 pixels.
    • Scroll down to SF-Smallscreen plugin and leave the Disable radio button enabled.
    • Scroll down to Supersubs and uncheck to disable the Supesubs.
  5. Replace the Main Menu Block with the Superfish Menu Block.
  • Go to the Blocks listing page - Structure > Blocks
  • Locate the Superfish 1 block under Disabled and assign it to the Menu Region.
  • Disable the Main Menu block that’s in the Menu region by default.
  • Scroll down and Save the listing changes.

Theme Adjustments

Once you have your Superfish Module enabled, you must disable one of the default Libraries in your YaleSites Template settings for the SF-Touchscreen plugin to work correctly. This should be done in the main theme settings for the YaleSites Template you are using (Boxed, Standard, or Wide) as well as the Home Page Deltas.

  1. Click on Appearance in the Toolbar.
  2. Click on the Settings link below the default theme you are using (in this example we are using the Yale Boxed Template Theme.
  3. Click on the Toggle Libraries tab and deselect the FastClick option.
  4. Now do the same thing on the Delta for the home page.
  5. Select Appearance > Delta
  6. Click on Configure for the Delta related to your YaleSites Template (in this example we are using the Yale Boxed Template)
  7. Repeat step #3 above.
  8.  

Further Explanations on what the other settings do

  • The SF-Touchscreen plugin allows the menu to respond to “tapping” on link items with a smartphone. When testing with a desktop browser the sub-menus still open up when hovering over the parent menu items. There are different “tap” behaviors you can select from.
    Note: unlike iOS, some Android devices do not interpret a screen tap as a mouseover or hover. This plugin patches Android devices to allow screen taps to fire the flyout menus. It also lets you tap once to open the flyout, then tap a second time to fire the parent menu link.
  • The SF-Smallscreen plugin swaps out the regular menu with a new one. When you choose “Convert to select element” the entire menu is replaced with a select element. When you choose “Convert to Accordion” a new Menu button is added to the top that reveals the replacement mobile nav menu. This is already built into the YaleSites theme so it’s an unnecessary duplication.