/ / Benutzerdefinierter Text für Drilldown-Menü "Zurück" Schaltfläche [Foundation 6] - Zurb-Foundation, Zurb-Foundation-6

Benutzerdefinierter Text für das Drilldown-Menü "Zurück" Schaltfläche [Foundation 6] - zurb-foundation, zurb-foundation-6

Während ich weiß, dass ich verwenden kann Daten-Zurück-Knopf Um den Text in meinen Drilldown-Menüs zu ändern, ist es möglich, sie so zu ändern, dass sie den Eltern des Drilldowns entsprechen?

Beispielsweise funktioniert das Aufrissmenü wie folgt: Beispiel 1

Und ich möchte, dass es so funktioniert: Beispiel 2

Ich hoffe, das macht Sinn und lass es mich wissen, wenn ich das klären kann. Vielen Dank für Ihre Informationen.

Antworten:

5 für die Antwort № 1

Es gibt ein paar Möglichkeiten, wie du das machen kannst, aber das Einfachste scheint mir so etwas zu sein:

1) Verwenden Grundlagen Drilldown-Optionen um einen neuen allgemeinen Zurück-Knopf zu setzen. z.B. data-back-button="<li class="js-drilldown-back"><a class="new-back"></a></li>"

Dies kümmert sich um das Styling mit .js-drilldown-back und macht es als ein Zurück-Button ohne zusätzliches JavaScript funktionieren. Es fügt auch eine neue Klasse hinzu a zur späteren Verwendung den Text einstellen.

2) Um den Text zu ändern, können Sie jQuery verwenden, etwa so:

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

All dies macht sich die Menüstruktur zunutze, um herauszufinden, was der ursprüngliche Linktext war, und kopiert sie dann auf die neue Zurück-Schaltfläche.

Dies sollte für alle Ebenen eines Aufrisses funktionieren, wie in diesem Beispiel: http://codepen.io/tymothytym/pen/GWbXap

Zu Ihrer Information:Es gibt ein paar leichte Usability-Bedenken bei der Verwendung der gleichen Etiketten, um in Menüs nach vorne und nach hinten zu zeigen, da Benutzer dies verwirrend finden können, insbesondere mit vielen Ebenen. Sie haben das vielleicht schon erwogen, ich erwähne es nur der Vollständigkeit halber.