abbrechen
Suchergebnisse werden angezeigt für 
Stattdessen suchen nach 
Meintest du: 

Brauche Hilfe bei CSS

sbengel
Tourist
7 0 4

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

0 Likes
r8r
Shopify Expert
990 103 309

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

 

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes