Custom Text for Back Program Detail Menu [Foundation 6]

While I know I can use the back button to change the text in my detailed menus, can I change them to reflect everything the parents of the deployment have?

For example, the sweep menu works as such: Example 1

And I would like it to function as such: Example 2

I hope this makes sense and informs me if I can clarify the situation. Thanks for any information you can provide.

+3


source to share


1 answer


There are several ways you could do this, but it seems to me that the simplest is:

1) Use Base Drilldown Options to set a new generic back button. egdata-back-button='<li class="js-drilldown-back"><a class="new-back"></a></li>'

This touches the styling .js-drilldown-back

and makes it work as a back button without additional JavaScript. It also adds a new class to a

for later use by setting the text.

2) To change the text you can use jQuery, maybe something like this:



$('.new-back').each(function(){
  var backTxt = $(this).parent().closest('.is-drilldown-submenu-parent').find('> a').text();
  $(this).text(backTxt);
});

      

This all speeds up the menu structure to find out what the original link text was and then copies it to a new back button.

This should work for all scan levels as in this example: http://codepen.io/tymothytym/pen/GWbXap

FYI: There are a few mild usability considerations using the same shortcuts pointing back and forth in menus as users may find it confusing, especially with many levels. You may have already looked at this, I mention it just for completeness.

+4


source







All Articles