[Accordion Menu/Drilldown] Feature request/suggestions

[brettsmason]

I love the new menu system as a whole but would love to see a few enhancements to the accordion menu/drilldown menu for menus that have sub navigation to make it possible to click the sub-menu parent links - its the one thing stopping me using both of them.

Drilldown

I would love to see an option (data-options?) that added the parent menu link as a link (copy?) in the sub-menu, so that it was clickable.

Accordion Menu

Similar issue - it would be great if we could have an option to keep the link on the parent item and make the sub-menu toggle a separate element so that the parent link still works.
An example of what I mean is here. There's also a writeup about it here if that helps.

I'd love to discuss this further and any other ideas! Unfortunately my JS skills are very limited so I can't do much to help in that area yet 😞

[brettsmason]

Wondered if this had ever been discussed at any point? (during planning for F6 or after release) I really wish I had the JS skills to write a PR! This would be a massive help for usability for me atleast (and I'm sure others too as they seem to be common patterns).

[Baedda]

I am wondering that they dont have this feature for the drilldown/accordion menu in F6. They had in the old topbar menu since Foundation 4. This is the code from the topbar of F5:

    if (!$dropdown.find('.title.back').length) {
          $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li>');

      // Copy link to subnav
      if (settings.custom_back_text == true) {
        $('h5>a', $titleLi).html(settings.back_text);
      } else {
        $('h5>a', $titleLi).html('&laquo; ' + $link.html());
      }
      $dropdown.prepend($titleLi);
    }

I agree with you this feature is very essential. I am working on a new project atm where i wanted to use F6s menu plugins for the navigation, but because this feature is missing I have to watch for another solution :(

[andycochran]

Hmm. Good idea. For now, you could roll your own with Toggler.

[brettsmason]

Not a bad idea @andycochran, though I don't think it will particularly easy to do within WordPress (the context where I would be using it). I might explore this route if the Zurb team say this is a dead end though.

[brettsmason]

I had a quick play around with the toggler plugin on Codepen and made this: http://codepen.io/brettsmason/pen/BjmOoZ

Not usable, but shows what I'd love to achieve in one form or another. Unfortunately I have very little chance in writing the needed JS for a custom solution 😞 so having it as an option within the accordion menu would be a complete lifesaver.

As for the drilldown menu, I managed to get the parent link to display through a bit of messing with the drilldown.js code, but again I doubt I'd be able to create something usable without guidance.

[brettsmason]

I've having a look at the drilldown plugin (as that seems a slightly easier place to start) and have a working parentLink option. However The code isn't very good and probably all over the place!

First I added parentLink as an option:

    /**
     * Appends the parent link to the submenu.
     * @option
     * @example false
     */
    parentLink: false,

And edited the _prepareMenu function:

  Drilldown.prototype._prepareMenu = function(){
    var _this = this;
    // if(!this.options.holdOpen){
    //   this._menuLinkEvents();
    // }
    this.$submenuAnchors.each(function(){
      var $sub = $(this);
      var $link = $sub.find('a:first');
      $link.data('savedHref', $link.attr('href')).removeAttr('href');
      $sub.children('[data-submenu]')
          .attr({
            'aria-hidden': true,
            'tabindex': 0,
            'role': 'menu'
          });
      if(_this.options.parentLink){
        var $parentLink = $link.parent().clone();
        $parentLink.removeAttr('class');
        $parentLink.find('ul').remove();
        $sub.children('[data-submenu]').prepend($parentLink);
      }
      _this._events($sub);
    });
    this.$submenus.each(function(){
      var $menu = $(this),
          $back = $menu.find('.js-drilldown-back');
      if(!$back.length){
        $menu.prepend(_this.options.backButton);
      }
      _this._back($menu);
    });
    if(!this.$element.parent().hasClass('is-drilldown')){
      this.$wrapper = $(this.options.wrapper).addClass('is-drilldown').css(this._getMaxDims());
      this.$element.wrap(this.$wrapper);
    }

  };

As I said it works, but I know its all wrong. I would love to get working correctly so I can submit a PR, then maybe look at the accordion.

@zurbchris if you get a minute your advice/guidance on this would be great! 😄

[steveteare]

Hi - I'd just like to add my voice to this. I suggested the same thing on the foundation forum:
http://foundation.zurb.com/forum/posts/37851-musing-on-menus-for-mobile-f6sites
and Rafi Benkual referred me here. The example accordion menu that @brettsmason refers to is exactly what I am after and it would be great to have an accordion menu where parent or child could be selected. Unfortunately I doubt I could be much help in developing it from the technical standpoint, but I would certainly like to add my voice to say - yes, this is most definitely worth doing.

[paxperscientiam]

I have a UI enhancement suggestion for Drilldown. Instead of a single "back" link, why not an arrangement of small circular button links that represent menu layers?

[rafibomb]

@paxperscientiam Have you seen an example like this? Would love to know more.

In F5 it looked like

[kball]

Drilldown has been merged and should make it into the next 6.2 rc. Accordian is still outstanding. @brettsmason do you want to take a look at that one too?

[brettsmason]

@kball The accordion menu seems a lot more complicated to make it work how I'd like (separate toggle and parent link still works) and I dont think I have the JS skills. I suppose one option, but not ideal, would be adding a similar option that I added to drilldown - prepend the parent link to the accordion submenu. Would like to hear thoughts on that though - as it adds an extra click.

[paxperscientiam]

@rafibomb That is close to what I had in mind, though I was thinking of something a bit more aesthetic. I will try to put together a simple mock-up and then report back here.

EDIT: Ok @rafibomb here is a (very) crude rendering of what I had in mind. For one, I think it would be clearer for the "closest" menu node name to be at the top (rather than just a back button). Image includes two versions.
http://imgur.com/dbVuUmg

EDIT 2: Another problem with the Drilldown menu is that unrelated content cannot occupy the space reserved for the menu at its maximum height (less the height of the closed Drilldown menu).

A possible (aesthetic) solution, if such a thing is so desired, would be to allow content to fill said space and simply have the sub menus overlap as necessary.

[thomaskieslich]

Here are two Examples with link to page and fold button in one menu line:
Accordion: http://www.dresden-central.de
Drilldown: https://www.ecointense.de
Would be nice to have this in Foundation Menus.

[brettsmason]

So I've worked out how to add a button that toggles the sub-menu and keep the parent link intact. However having difficulty working out the keyboard navigation changes needed. Can anyone offer any help with what I would need to change? Also any guidance on toggle styling - I'm thinking it should be very simple, but provide a decent sizes tap target.

@gakimball If I upload this somewhere/create a PR(?) would you and the Zurb guys be able to advise on style choices/keyboard navigation?

[brettsmason]

I've uploaded an early example here.
Any feedback/advice on styling would be appreciated! Now I need to work out the keyboard navigation stuff...

[JeremyEnglert]

@brettsmason looking awesome!

[brettsmason]

@JeremyEnglert Thanks! I'd love to get this included I'm not sure where to go with the styling.
Any thoughts? I think the toggle needs to be separated some how visually from the parent link, but styling kept as minimal as possible.

[JeremyEnglert]

I like the styling. The only other way I can see it being styled is without the border - but then it may not be clear that it is (essentially) a button.

[andycochran]

Adding this feature, we'll also need to keep the functionality of menu items toggling sub-menus. So there needs to be visual distinction between when the menu item is a link or a sub-menu toggle.

In your example, covering up the link's arrow with a sub-menu toggle arrow makes sense if every menu item is a link. It'd be awkward to use both kinds in one menu, but both need to work.

Maybe the way to style "link + sub-menu toggle" is like split buttons. Not a border all the way around, but just a vertical line between the text and arrow.

And maybe the current (sans-link) sub-menu toggles should have their arrows inline with the text instead of shoved to the opposite side. That could help imply that the text triggers a dropdown instead of linking to something.

You'll also need to remove the ::after arrow on menu items that are links—which are currently showing through your transparent sub-menu toggle buttons.

[brettsmason]

Thanks @andycochran and @JeremyEnglert.
I agree that a split button approach might be the best way - this is what I originally had planned. However split buttons work because of the background colour - the accordion doesn't have this so I'm not sure how we could visually split it up. Any ideas?

I'm not sure how I feel about mixing an accordion menu, some with parent links and some without (that is what you mean right?). Surely you would only enable this feature if your menu had links on all parent items? The same applies for the drilldown menu - I wouldn't enable the parentLink feature on that unless I had links on all the parents. I'm happy to discuss this further though as I would rather do what the general opinion is happy with.

If we could all agree on the right way to progress this I'll crack on and try and get it finished 😄

Also thanks for pointing out the ::after styling - it was only at base camp on styling at the moment so I could test it!

[spud]

I was hoping to use the accordion plugin to handle a hierarchy browsing interface for an administrative backend, where each "row" was a whole series of content: title, template, status, edit button, delete button. The edit and delete buttons need to click through to their various actions, the title needs to click through to a display template and the row might need to reveal a sub-menu of child pages.

I wanted the disclosure triangle to be in left-aligned, in front of the item, rather than right-aligned.

Each "row" is a <div class="row"> with a series of columns for the page attributes.

When I read "any <a> paired with a nested <ul>..." were the conditions for triggering the accordion behavior, I tried this:

<li>
<a href="#">&nbsp;</a>
<div class="row"><div...columns with links in them.../div></div>
<ul class="submenu">...</ul>
<li>

And made some CSS adjustments to absolutely position the disclosure-toggling a that the accordion plugin adds, and to add padding-left to the .row to give the triangle some room.

The blank a creates the disclosure triangle, and the subsequent a tags work as expected. Seems to work like a charm so far.

Now to see if I can get it to work with a hierarchy-savvy nestedSortable plugin to allow re-ordering by drag-n-drop...!

[Baedda]

Is here something going on? I would hope to see the suggested split button approach in the next release cause we really want to use the accordion menu in our project. We know that having split buttons is not the best approach for every project so giving the user the control to activate/disable this feature via config would be really nice.

In my opinion the visual separation (css) doesn´t need to be part of the Foundation core. But Foundation should offer the functionality and the styling can be done by the user cause it depends on the project. For example: in my project I am using background colors for the accordion menu so it would be easy to seperate the toggle and the link visually on hover.

[brettsmason]

@Baedda I'm still working on adding the accordion menu with split button and my aim is to get it into v6.3 (it couldn't appear any sooner as its a new feature anyway). However my priorities have had to shift a bit to help with bug fixes etc. I do have a working version with the split button approach though, I just need some help with the keyboard navigation changes to make it work fully.

@Owlbertz Do you mind giving me a bit of assistance in finishing this maybe later this week if you have time? I just need some guidance on what I need to change and the best approach etc!

[Owlbertz]

@brettsmason Sure. For me end of the week (or even the weekend?) would fit best.

[brettsmason]

@Owlbertz No problem I'll try and sort out what I need to ask you in the next few days, but there's no rush at all, whenever you get a few minutes!

[truetamtam]

About drilldown.
Would be nice to have method, something like "_show",
to "drill" to level of menu with item marked ".active"
And show to user that level of menu.
Here's JsFiddle

[morenstrat]

The accordion menu plugin attaches the click event to the immediate li child anchors. You can keep the parent link clickable if you wrap it in a container and add another anchor tag to open the submenu.

Here is an example:

<ul class="vertical menu" data-accordion-menu>
<li>
<span><a href="/contact.html">I am clickable!</a></span>
<a href="#">And I open the submenu!</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>

[brettsmason]

I'd still love to get the accordion menu with seperate submenu buttons into 6.3, but I unfortunately dont have the JS knowledge to get it over the finish line. If anyone wants to assist let me know.

[andycochran]

I'm still wondering if this should just be done with Toggler and live in a Building Block.

[relthyg]

I wrote a little patch fo the accordion menu for my own purposes which offers an option whether the submenus should be closed or the parent link should be followed. See it here here..

What do you think?

[andycochran]

Hmm. There's no way of knowing if the second click on the parent item will collapse its children or follow its link. There should be some type of feedback so the user know what will happen. And it would be nice to be able to follow the parent link without first uncollapsing its children.

[relthyg]

I agree. There is this approach which is far better.

[andycochran]

Here's the issue with visual cues… We basically need split buttons to work within a accordion menus. Split buttons work well because their clickable areas are visually distinct. But there are no visual cues that distinguish the clickable area of menu items. Imagine if an accordion menu was styled similar to a button group. Then it'd be easy to incorporate a split button into that group.

I'm once again, pointing out the overlap in menus and button groups. 😁

[brettsmason]

So there has been progress with this. A branch has been added on the Zurb repo so a few other contributors can assist ing etting it ready for 6.3. See here: https://github.com/zurb/foundation-sites/tree/accordion-submenu-toggle

There are 2 issues left - the keyboard navigation and a decision on how we style it.

[ashussen]

Here is the quick fix I found.

  jQuery('.menu-item-has-children > a').click(function(){
    jQuery(this).unbind('click');
  });

This will allow the parent link to be clickable on the second attempt.

Details:
1st click - Open the accordion
2nd click - Open the link

It is natural response for everyone to try clicking it second time, if the first attempt is not working.

Drawback:
User cannot close the accordion in which acceptable in my case