Anchor menu block settings
Anchor target block
Anchor entity embed
Embedded Anchor Target Block
Preview on small devices (smartphones): On small devices, the anchor menu appears as a Foundation Dropdown. The button label is changed to the name of the current active section.
Preview on large devices: Regular anchor menu, with active marked menu item according to the current section

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

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!

  1. Install the module as usual: https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-mod...
  2. Go to your block configuration page and add the "Dynamic Anchor Menu Block"
  3. 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!

Development proudly sponsored by:

Supporting organizations: 
proudly developed this module for the community!

Project information

Releases