Liquid, JavaScript, Themes
Hallo zusammen,
ich möchte bei mir ein bisschen was umgestalten und zwar soll je nach ausgewählter Kategorie ein anderes Menü angezeigt werden.
Das habe ich auch mit einer if Abfrage geschafft. Jetzt soll das Menü als Liste (ul/li) angezeigt werden, dass klappt auch.
Was ich aber nicht hinbekomme, ist das der ausgewählte Link hervorgehoben wird (active).
Könnt Ihr mir dabei helfen. Ich füge mal meine Codes ein:
Hier der Code auf der collection.liquid
{% if collection.title == "Kategorie1" %}
<div class="button_filters">
{% for link in linklists.gold-untermenue.links %}
<ul><li class"active"><a href="{{ link.url }}">{{ link.title }}</a></li></ul>
{% endfor %}
</div>
{% endif %}
Hier der style.scss.liquid
.button_filters {margin: 20px 0;
ul {font-size: 0;display: inline-block;}
li {display: inline-block;margin: 10px 10px 0 0;}
a {display: block;padding: 7px 10px;background: rgba( 0,0,0,.1 );font-size: $base_font_size;text-transform: capitalize;}
.active a {background: $color_4;color: $color_3;}
}
So wie es jetzt ist, werden alle Links als active dargestellt.
Danke schon mal für die Hilfe.
LG Andi
Hi @sbengel,
zum Einen fehlt das „=“ beim class-Attribut, zum anderen die Überprüfung, ob der jeweilige Link tatsächlich der aktuellen Seite entspricht:
{% if collection.title == "Kategorie1" %}
<div class="button_filters">
{% for link in linklists.gold-untermenue.links %}
<ul><li{% if link.active %} class="active"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li></ul>
{% endfor %}
</div>
{% endif %}
Das sollte dein Problem lösen!
LG, Mario
Bist du ein EU-Dropshipping Supplier, 3PL-Streckengeschäft Lieferant, oder ein Spediteu...
By Gabe Apr 18, 2024Wie du eine intuitive und ansprechende Online-Shopping-Experience für deine Kunden au...
By Gabe Apr 1, 2024Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024