FROM CACHE - de_header
Gelöst

Hamburger Menü editieren

helpmeeeee
Neues Mitglied
4 0 0

Hallo, 

ich habe folgendes Problem: in meinem Hamburger Menü muss der Kunde auf das "+" klicken damit sich das Drop Down Menü öffnet. Gibt es eine Möglichkeit das ganze so einzustellen, dass sich das Drop Down Menü nicht nur bei Klick auf das "+", sondern auch bei Klick auf "T-SHIRTS" öffnet?

Unbenannt.PNG

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
16261 2566 3830

Erfolg.

Hey @helpmeeeee super Name!

Du möchtest also dass man nicht nur auf das + Symbol klicken muss sondern auch auf den Menüpunkt Titel im Sandwich Menu, so dass es nach unten ausklappt. Der Grund, dass das Verhalten derzeit so ist, ist weil das Theme sehr auf Mobile getrimmt ist (mobile_nav). VIele Shops bekommen ja 70%+ Traffic vom Handy als vom Desktop.

Aber du hättest bestimmt gerne, dass es so wie dieses Menü Beispiel ist. Siehe da auch den einen roten Menüpunkt der eine Sale Collection kennzeichnet.

Das muss man im drawer-menu.liquid ODER als separate .liquid Snippets Template einbauen mit einem Code, wie das folgende Beispiel und das kannst du gerne testen aber zuerst in einer Kopie deines Live Themes. Siehe unten auch die Zeile 75.

Aber das folgende Snippet Beispiel aus meinem Brooklyn Theme ist Themenabhängig und bei weiteren Fragen, bitte einen Programmierer oder Experten beauftragen:

Spoiler
<div class="drawer__inner drawer-left__inner">

{% if section.settings.drawer_search_enable %}
{% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
{% endif %}

<ul class="mobile-nav">
{% for link in linklists[section.settings.main_menu_link_list].links %}
{% if link.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
<span class="mobile-nav__link">{{ link.title | escape }}</span>
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
<ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
{% assign parent_index = forloop.index %}
{% for childlink in link.links %}
{% if childlink.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
<span class="mobile-nav__link">{{ childlink.title | escape }}</span>
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
<ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item">
<a
href="{{ grandchildlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item">
<a
href="{{ childlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>

{% else %}

<li class="mobile-nav__item">
<a
href="{{ link.url }}"
class="mobile-nav__link"
style="{% if link.title == 'SALE' or link.url == '/collections/sale' %}color:red;{% endif %}"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>

{% endif %}
{% endfor %}
{% comment %}
Spacer element
{% endcomment %}
<li class="mobile-nav__spacer"></li>

{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__item mobile-nav__item--secondary">
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
{% for link in linklists[section.settings.drawer_bottom_link_list].links %}
<li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<!-- //mobile-nav -->
</div>

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff
16261 2566 3830

Erfolg.

Hey @helpmeeeee super Name!

Du möchtest also dass man nicht nur auf das + Symbol klicken muss sondern auch auf den Menüpunkt Titel im Sandwich Menu, so dass es nach unten ausklappt. Der Grund, dass das Verhalten derzeit so ist, ist weil das Theme sehr auf Mobile getrimmt ist (mobile_nav). VIele Shops bekommen ja 70%+ Traffic vom Handy als vom Desktop.

Aber du hättest bestimmt gerne, dass es so wie dieses Menü Beispiel ist. Siehe da auch den einen roten Menüpunkt der eine Sale Collection kennzeichnet.

Das muss man im drawer-menu.liquid ODER als separate .liquid Snippets Template einbauen mit einem Code, wie das folgende Beispiel und das kannst du gerne testen aber zuerst in einer Kopie deines Live Themes. Siehe unten auch die Zeile 75.

Aber das folgende Snippet Beispiel aus meinem Brooklyn Theme ist Themenabhängig und bei weiteren Fragen, bitte einen Programmierer oder Experten beauftragen:

Spoiler
<div class="drawer__inner drawer-left__inner">

{% if section.settings.drawer_search_enable %}
{% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
{% endif %}

<ul class="mobile-nav">
{% for link in linklists[section.settings.main_menu_link_list].links %}
{% if link.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
<span class="mobile-nav__link">{{ link.title | escape }}</span>
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
<ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
{% assign parent_index = forloop.index %}
{% for childlink in link.links %}
{% if childlink.links != blank %}
<li class="mobile-nav__item">
<div class="mobile-nav__has-sublist">
<button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
<span class="mobile-nav__link">{{ childlink.title | escape }}</span>
<span class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
</span>
<span class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
</span>
</button>
</div>
<ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item">
<a
href="{{ grandchildlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item">
<a
href="{{ childlink.url }}"
class="mobile-nav__link"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>

{% else %}

<li class="mobile-nav__item">
<a
href="{{ link.url }}"
class="mobile-nav__link"
style="{% if link.title == 'SALE' or link.url == '/collections/sale' %}color:red;{% endif %}"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>

{% endif %}
{% endfor %}
{% comment %}
Spacer element
{% endcomment %}
<li class="mobile-nav__spacer"></li>

{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__item mobile-nav__item--secondary">
<a href="{{ routes.account_url }}">{{ 'layout.customer.account' | t }}</a>
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__item mobile-nav__item--secondary">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
{% for link in linklists[section.settings.drawer_bottom_link_list].links %}
<li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<!-- //mobile-nav -->
</div>

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

helpmeeeee
Neues Mitglied
4 0 0

Danke für deine schnelle Antwort! 

Ja, du hast meine Frage richtig verstanden und ich nutze auch das Brooklyn Theme. Allerdings sieht mein Hamburger Menü jetzt so aus: 

Hast du hierfür evtl. eine Lösung?

Bild_2021-05-20_143157.png

Gabe
Shopify Staff
16261 2566 3830

@helpmeeeee 

Gut das machst du in einer Testkopie des Themes. Wie lautet der Code wo die Farbe Schwarz einprogrammiert wurde?

Wenn das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail hier und unser Theme Team wird das anschauen können.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog