Merge pull request #10616 from zurb/add-parent-link-to-accordion-menu

Add parent link functionality to accordion menu
foundation · Sep 8, 2017 · e688109 · e688109
2 parents 6d41ce4 + 8d0f705
commit e688109
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 1 deletion.
diff --git a/js/foundation.accordionMenu.js b/js/foundation.accordionMenu.js
@@ -66,6 +66,10 @@ class AccordionMenu extends Plugin {
           subId = $sub[0].id || GetYoDigits(6, 'acc-menu'),
           isActive = $sub.hasClass('is-active');
 
+      if(_this.options.parentLink) {
+        let $anchor = $elem.children('a');
+        $anchor.clone().prependTo($sub).wrap('<li data-is-parent-link class="is-submenu-parent-item is-submenu-item is-accordion-submenu-item"></li>');
+      }
 
       if(_this.options.submenuToggle) {
         $elem.addClass('has-submenu-toggle');
@@ -286,6 +290,7 @@ class AccordionMenu extends Plugin {
   _destroy() {
     this.$element.find('[data-submenu]').slideDown(0).css('display', '');
     this.$element.find('a').off('click.zf.accordionMenu');
+    this.$element.find('[data-is-parent-link]').detach();
 
     if(this.options.submenuToggle) {
       this.$element.find('.has-submenu-toggle').removeClass('has-submenu-toggle');
@@ -297,6 +302,13 @@ class AccordionMenu extends Plugin {
 }
 
 AccordionMenu.defaults = {
+  /**
+   * Adds the parent link to the submenu.
+   * @option
+   * @type {boolean}
+   * @default false
+   */
+  parentLink: false,
   /**
    * Amount of time to animate the opening of a submenu in ms.
    * @option

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
@@ -85,7 +85,7 @@ class Drilldown extends Plugin {
       var $link = $(this);
       var $sub = $link.parent();
       if(_this.options.parentLink){
-        $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menuitem"></li>');
+        $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li data-is-parent-link class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menuitem"></li>');
       }
       $link.data('savedHref', $link.attr('href')).removeAttr('href').attr('tabindex', 0);
       $link.children('[data-submenu]')
@@ -424,6 +424,7 @@ class Drilldown extends Plugin {
       $(this).off('.zf.drilldown');
     });
 
+    this.$element.find('[data-is-parent-link]').detach();
     this.$submenus.removeClass('drilldown-submenu-cover-previous invisible');
 
     this.$element.find('a').each(function(){

diff --git a/test/visual/accordion-menu/parent-link.html b/test/visual/accordion-menu/parent-link.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Accordion Menu Parent Link</title>
+    <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
+
+    <style>
+      h1 {
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 2rem;
+        width: 100%;
+      }
+
+      h3 {
+        width: 100%;
+      }
+
+      .example {
+        padding: 2rem;
+        border: 1px solid #ddd;
+        width: 100%;
+      }
+
+      .example + h1 {
+        margin-top: 5rem;
+      }
+
+      .example + h3 {
+        margin-top: 3rem;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Accordion Menu</h1>
+          <p>With parent link, parent should be reproduced in child, so expanding 'Two (Parent)' should
+             show Two (Parent) inside</p>
+          <div class="example" style="max-width: 250px">
+            <ul class="vertical menu accordion-menu" data-accordion-menu data-parent-link="true">
+              <li><a href="#">One</a></li>
+              <li>
+                <a href="#">Two (Parent)</a>
+                <ul class="menu vertical nested">
+                  <li><a href="#">Two A</a></li>
+                  <li><a href="#">Two B</a></li>
+                  <li><a href="#">Two C</a></li>
+                  <li><a href="#">Two D</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Three</a></li>
+              <li><a href="#">Four</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
diff --git a/test/visual/responsive-menu/accordion-dropdown.html b/test/visual/responsive-menu/accordion-dropdown.html
@@ -42,6 +42,37 @@ <h2>Responsive Menu - Accordion (with submenu toggle) to Dropdown:</h2>
           </div>
 
       </div>
+      <div class="large-12 cell">
+        <h2>Responsive Menu - Accordion and Drilldown both with parent links:</h2>
+        <div id="main-nav">
+          <ul class="menu vertical drilldown" data-responsive-menu="drilldown medium-accordion" data-parent-link="true">
+            <li>
+              <a href="http://www.github.com">Item 1 (external)</a>
+              <ul class="menu vertical">
+                <li><a href="google.com">Item 1A (external)</a></li>
+                <li>
+                  <a href="#">Item 1B</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <a href="#">Item 2</a>
+              <ul class="menu vertical">
+                <li><a href="#">Item 2A</a></li>
+                <li>
+                  <a href="#">Item 2B</a>
+                  <ul class="menu vertical">
+                  <li><a href="google.com">Item 2BA (external)</a></li>
+                  <li>
+                    <a href="#">Item 2BB</a>
+                  </li>
+                </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
 
     <script src="../assets/js/vendor.js"></script>