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. The radio button enabled should be jQuery sf-Smallscreen plugin for this menu depending on the user’s Web browser window width.

  • Scroll down to Supersubs and uncheck to disable the Supersubs.
  1. 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.

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.

Drop-Down Arrows for Expandable Menu Items (2016 Standard Theme)

Menu drop-down arrows can be helpful to visually identify which menu items can be expanded to reveal more list items without the need for interaction. The Superfish menu has a built-in drop-down arrow function although it is not visible within the YaleSites 2016 Standard theme without additional customization. This can be resolved with the following CSS:

/*(1)Hides arrows from main nav bar--->*/ ul.sf-menu > li > a > span.sf-sub-indicator {display: none;}
/*(2)Replaces white .PNG arrow asset with black forward .SVG--->*/ .sf-sub-indicator {background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M15.405,13L6.821,4.236C6.438,3.845,6.442,3.217,6.829,2.83l1.536-1.536c0.391-0.391,1.026-0.39,1.417,0.002l10.925,10.997 C20.902,12.488,21,12.744,21,13c0,0.256-0.098,0.512-0.293,0.707L9.782,24.704c-0.39,0.393-1.025,0.394-1.417,0.002L6.829,23.17 c-0.387-0.387-0.391-1.015-0.008-1.406L15.405,13z'/%3E%3C/svg%3E%0A");}
  1. Main nav menu - use this rule to hide the arrows from the main navigation menu which don’t always align correctly. 
  2. Replace arrow asset - use this rule to replace the white arrow .PNG with an embedded black .SVG.