Menu icon Foundation
Navigation patterns feedback/help

I'm loving using Foundation 6 so far, other than the expected teathing problems which are being ironed out.

I have one problem with the navigation patterns though. I would really like an option for users on mobile to navigate to parent level items if needed.

What would be great is if accordion menu could have a sub menu toggle (as a data option maybe?) so that the parent link could still be a working link. As an example see here: http://samikeijonen.github.io/responsive-nav.js/demos/multiple-levels/

Also I'd love to see the duplicate parent links in the drilldown menu like in F5, though I guess that will get added eventually :)

If anyone has done either of these in F6 I'd love to see it/know how to!

navigationaccordion menudrilldown menu

I'm loving using Foundation 6 so far, other than the expected teathing problems which are being ironed out.

I have one problem with the navigation patterns though. I would really like an option for users on mobile to navigate to parent level items if needed.

What would be great is if accordion menu could have a sub menu toggle (as a data option maybe?) so that the parent link could still be a working link. As an example see here: http://samikeijonen.github.io/responsive-nav.js/demos/multiple-levels/

Also I'd love to see the duplicate parent links in the drilldown menu like in F5, though I guess that will get added eventually :)

If anyone has done either of these in F6 I'd love to see it/know how to!

Endre R. Fehn almost 3 years ago

The following patch to foundation.drilldown.js creates a new option "parentButton". It replaces keywords #href and #txt with parent link and link text respectively.

Might not be the most elegant solution, but it seems to work. Default parentButton is blank to keep original behaviour unchanged.

 --- ~/f6/bower_components/foundation-sites/js/foundation.drilldown.js  2015-12-03 00:26:32.000000000 +0100
+++ ./foundation.drilldown.js  2015-12-08 09:29:07.000000000 +0100
@@ -43,6 +43,12 @@
      */
     backButton: '<li class="js-drilldown-back"><a>Back</a></li>',
     /**
+     * Markup used for JS generated parent button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-parent' class required. Remove the backslash (`\`) if copy and pasting.
+     * @option
+     * @example '<\li class="js-drilldown-parent"><\a href="#href">#txt<\/a><\/li>'
+     */
+    parentButton: '',
+    /**
      * Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
      * @option
      * @example '<\div class="is-drilldown"><\/div>'
@@ -95,7 +101,13 @@
     });
     this.$submenus.each(function(){
       var $menu = $(this),
-          $back = $menu.find('.js-drilldown-back');
+          $back = $menu.find('.js-drilldown-back'),
+          $parent = $menu.find('.js-drilldown-parent');
+      if (!$parent.length){
+        $menu.prepend(_this.options.parentButton
+                      .replace(/#href/g,$menu.parent().find('a:first').data('savedHref'))
+                      .replace(/#txt/g,$menu.parent().find('a:first').html()));
+      }
       if(!$back.length){
         $menu.prepend(_this.options.backButton);
         _this._back($menu);
@@ -306,6 +318,7 @@
     Foundation.Nest.Burn(this.$element, 'drilldown');
     this.$element.unwrap()
                  .find('.js-drilldown-back').remove()
+                 .end().find('.js-drilldown-parent').remove()
                  .end().find('.is-active, .is-closing, .is-drilldown-sub').removeClass('is-active is-closing is-drilldown-sub')
                  .end().find('[data-submenu]').removeAttr('aria-hidden tabindex role')
                  .off('.zf.drilldown').end().off('zf.drilldown');