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
Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024Was genau ist POD? Von T-Shirts bis hin zu Plakaten, Kaffeetassen, Wandmatten, alles was m...
By Kai Feb 29, 2024