foundation_anchor_menu_block

Provides ZURB Foundation based dynamic anchor menu blocks, dynamically generated based on contents of the current page by classes and data attributes.

Allows flexible anchor / jump menus scrolling to specific page sections. Especially helpful on One-page sites and for long contents.

Dependencies

ZURB Foundation Sites (Library)
Entity embed + Entity browser (optional) to embed Anchor Blocks in CKEditor

Functionality

The module collects anchor targets from the content with Javascript and adds them to the Zurb Foundation Magellan anchor menu (https://get.foundation/sites/docs/magellan.html).

Also it provides a block type "Anchor Custom Block", with the fields:

ID: The anchor target id.
Title: The readable title added to the menu, if no title is given, the anchor will not be added to the dynamic anchor menu.

This block acts as scroll-target and data source for the dynamic anchor menu.

Installation & use

Important for Composer installation: See the composer installation instructions on https://www.drupal.org/project/foundation_sites
Also see Downloading third-party libraries using Composer.

The module depends on asset-packagist!

Install the module as usual: https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-mod...
Go to your block configuration page and add the "Dynamic Anchor Menu Block"
Add anchor targets by block, custom markup, ... (see possibilities described beyond)

Add anchors by block

Add some "Anchor Custom Block"'s in the block configuration page, in Layout Builder, ...

Embed anchors in WYSIWYG

The module also creates an entity embed button for the CKEditor, you just need to add the button in your WYSIWYG configuration page (/admin/config/content/formats). Furthermore an entiy browser for Anchor Custom Blocks will be created.

Add anchors manually in HTML

The element just requires the following attributes:

<div id="my-custom-anchor-target" data-magellan data-magellan-target="my-custom-anchor-target" data-anchor-menu-title="My Custom Anchor Target"></div>

Javascript callback functions

"famb:init"

Example Usage:

      $(document).on('famb:init', function(event, anchorMenuObj){
        // Remove anchor menu block if empty
        if(!$(anchorMenuObj).children().length){
          $(anchorMenuObj).parents('.block:first').remove();
        }
      });

Not using Foundation, but Bootstrap or something similar?

Feel free to create an issue, fork this module, use similar classes and names or create a patch to make the functionality available for other UI frameworks!