适用于移动设备和桌面 Shopify 的不同菜单

Question

I want so set different menu for mobile and desktop devices for my shopify website.

Here is my shopify header code:

 <div class="header-container" data-section-type="header" itemscope itemtype="http://schema.org/Organization" data-cc-animate data-is-sticky="{{ section.settings.sticky_header }}">
{%- assign featured_links = section.settings.nav_featured_link | split: ', ' -%}
<div class="page-header {% if section.settings.logo_location == "links" %}layout-nav{% else %}layout-{{ section.settings.header_layout }}{% endif %} using-compact-mobile-logo">
  <div class="toolbar-container">
    <div class="container">
      <div id="toolbar" class="toolbar cf
        {% if section.settings.header_layout == 'center' %}toolbar--three-cols-xs{% else %}toolbar--two-cols-xs{% endif %}
                {% if section.settings.logo_location == 'toolbar' and section.settings.header_layout == 'center' %}toolbar--three-cols{% else %}toolbar--two-cols{% endif %}
            {% if section.settings.search_text_box_large and section.settings.search_bar != "icon" %}toolbar--text-box-large{% endif %}">

        <div class="toolbar-left {% if section.settings.logo == blank %}toolbar--text-logo{% endif %}
                    {% if align_search_left %}toolbar-left--search-left{% endif %}">
          <div class="mobile-toolbar">
            <a class="toggle-mob-nav" href="#" aria-controls="mobile-nav" aria-label="{{ 'layout.header.open_mobile_nav_aria_label' | t | escape }}">
              <span></span>
              <span></span>
              <span></span>
            </a>
          </div>

This is the theme settings that allow user to chose a menu for the mobile.

    {%- assign featured_links = section.settings.nav_featured_link | split: ', ' -%}

so how do i create or set different menu for desktop users too?

Answer 1

          <!-- desktop menu -->   
              <nav class="header__inline-menu">
                <ul class="list-menu list-menu--inline" role="list">
                  {%- for link in section.settings.menu.links -%}
                  <li>
                    {%- if link.links != blank -%}
                    <header-menu>
                      <details id="Details-HeaderMenu-{{ forloop.index }}">
                        <summary class="header__menu-item list-menu__item link focus-inset">
                          <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        {% render 'icon-caret' %}
                                </summary>
                          <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1">
                            {%- for childlink in link.links -%}
                            <li>
                              {%- if childlink.links == blank -%}
                              <a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                {{ childlink.title | escape }}
                              </a>
                              {%- else -%}
                              <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                                <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
                                  <span>{{ childlink.title | escape }}</span>
                                  {% render 'icon-caret' %}
                                </summary>
                                <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">
                                  {%- for grandchildlink in childlink.links -%}
                                  <li>
                                    <a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                      {{ grandchildlink.title | escape }}
                                    </a>
                                  </li>
                                  {%- endfor -%}
                                </ul>
                              </details>
                              {%- endif -%}
                            </li>
                            {%- endfor -%}
                          </ul>
                          </details>
                        </header-menu>
                      {%- else -%}
                      <a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                        <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                  </a>
                        {%- endif -%}
                        </li>
                      {%- endfor -%}
                      </ul>
                  </nav>

<!-- mobile menu -->
<div id="menu-drawer" class="gradient menu-drawer motion-reduce" tabindex="-1">
<nav class="menu-drawer__navigation">
                  <ul class="menu-drawer__menu has-submenu list-menu" role="list">
                   {%- for link in section.settings.mobile_menu.links -%}
              <li>
                {%- if link.links != blank -%}
                  <header-menu>
                    <details id="Details-HeaderMenu-{{ forloop.index }}">
                      <summary class="header__menu-item list-menu__item link focus-inset">
                        <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        {% render 'icon-caret' %}
                      </summary>
                      <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1">
                        {%- for childlink in link.links -%}
                          <li>
                            {%- if childlink.links == blank -%}
                              <a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                {{ childlink.title | escape }}
                              </a>
                            {%- else -%}
                              <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                                <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
                                  <span>{{ childlink.title | escape }}</span>
                                  {% render 'icon-caret' %}
                                </summary>
                                <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">
                                  {%- for grandchildlink in childlink.links -%}
                                    <li>
                                      <a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                        {{ grandchildlink.title | escape }}
                                      </a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </details>
                            {%- endif -%}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </details>
                  </header-menu>
                {%- else -%}
                  <a href="{{ link.url }}" class="header__menu-item header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                  </a>
                {%- endif -%}
              </li>
            {%- endfor -%}
                  </ul>
                </nav>
</div>
<!-- schema for mobile or desktop -->
 {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "desktop menu"
    },
        {
      "type": "link_list",
      "id": "mobile_menu",
      "default": "main-menu",
      "label": "mobile menu"
    },