Expanding and Collapsing Foundation 6 Accordion Menu on Scroll with Magellan

Question

I have built a test site using Foundation 6 Accordion Menu and Magellan: http://studiospaces.vlvtn.com/test

I would like the top level headers to expand and collapse when you reach the relative sections (eg #header-1, #header-2) on scroll.

It's a little out of my capabilities, and any help in the right direction will be hugely appreciated!

Thank you in advance.

Evan.

score 1 · Accepted Answer · answered Sep 29 '16 at 16:37

Good question...

Had a play with this and I think I have cracked it, hopefully the comments will make sense.

There is an event fired by magellan update.zf.magellan that I have used. This fires pretty much on mouse scroll.

As Magellan adds an active class the the current active anchor I am getting this element and comparing it to a stored lastActive variable. If they are different then the section has updated.

Then I check if the current active anchor is a child of a sub menu, if not I close all open menus. If it is a child I open its parent.

You can open and close Accordion menus using the methods described on the Accordion docs page

This method relies on classes so it may not work for your setup. You could use the current # in the url to detect changes if using deep linking.

//store the last active element
var lastActive = null;
//update called when magellan changes
$('#test-menu').on('update.zf.magellan', function() {

  //get the curerntly active section in the menu
  var $active = $(this).find('a.active');
  //the active anchor has changed - use the HTML element to compare
  if (lastActive !== $active[0]) {

    lastActive = $active[0];

    /*
     does the ative element have a parent <ul> that is a submenu
     <ul class="menu vertical nested submenu is-accordion-submenu is-active"> <--- This element
     <li>
     <a href="#" class="active">Item 1A</a> <-- the active element
     </li>
     <li>
     <a href="#" >Item 1BA</a>
     </li>
     </ul>
     */
    var isActiveParentASubmenu = $active.parent().parent().hasClass('is-accordion-submenu'); //the UL
    //
    if (!isActiveParentASubmenu) {
      //current active does not have a parent that is a submenu, therefore close all open submenus
      $('#test-acc').foundation('up', $('.is-accordion-submenu'));
    } else {
      //current active is a child of a subment, open the sub menu it belongs to
      $('#test-acc').foundation('down', $active.parent().parent());
    }
  }


});

<div data-sticky-container>
  <div class="sticky" data-sticky data-options="marginTop:0;" style="width:100%">
    <div id="test-menu" data-magellan>

      <ul id="test-acc" class="vertical menu" data-accordion-menu data-multi-open="false">
        <li>
          <a href="#first">First Arrival</a>
          <ul class="menu vertical nested">
            <li><a href="#first-a">First A</a>
            </li>
            <li><a href="#first-b">First B</a>
            </li>
          </ul>
        </li>
        <li><a href="#second">Second Arrival</a>
        </li>
        <li><a href="#third">Third Arrival</a>
          <ul class="menu vertical nested">
            <li><a href="#third-a">Third A</a>
            </li>
            <li><a href="#third-b">Third B</a>
            </li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div>

<div class="sections">
  <section id="first" data-magellan-target="first">
    <h1>First Section</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="first-a" data-magellan-target="first-a">
    <h1>First A</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="first-b" data-magellan-target="first-b">
    <h1>First B</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="second" data-magellan-target="second">
    <h1>Second Section</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="third" data-magellan-target="third">
    <h1>Third Section</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="third-a" data-magellan-target="third-a">
    <h1>Third A</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
  <section id="third-b" data-magellan-target="third-b">
    <h1>Third B</h1>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
    <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut
      libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget
      tincidunt nibh pulvinar a.</p>
  </section>
</div>

— Great, thank you. It works and it answered my question perfectly! One last request is if you use the accordion navigation with a click and skip sections, it opens/closes through the lists, is there a way to delay this function until it's reached it's destination do you think? — Evan, Sep 30 '16 at 10:20
You could set a variable that is set when clicking the skip button that then stops the on 'update.zf.magellan' function running. Once the scrolling is finished reset the variable so it runs as normal.. — r8n5n, Oct 03 '16 at 08:44

Expanding and Collapsing Foundation 6 Accordion Menu on Scroll with Magellan

1 Answers1