Жидкое меню по умолчанию расширенное

Question

У меня есть раскрывающееся меню жидкости со списком продуктов, которые расширяются только при нажатии. Я выяснил, как открыть его по умолчанию при загрузке сайта. Я просто нашел <ul> тег для моего списка и изменил его от этого:

<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false"> 

к этому:

<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false"> 

Однако, я также хотел бы, чтобы это было закрыто по умолчанию на маленьких экранах.

До сих пор я не мог найти решение, которое позволяет мне это делать. Я открыт как для жидких, так и для CSS решений. У кого-нибудь есть идеи?

Вот мой код, как он выглядит теперь по умолчанию расширения:

<div class="grid"> 


    <nav class="grid__item small--text-center medium-up--one-fifth" id="makeShort" role="navigation"> 
    <hr class="hr--small medium-up--hide"> 
    <button data-target="site-nav" id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav"> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="line"></span> 
     <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span> 
    </button> 

    <div id="SiteNav" class="site-nav" role="menu"> 
     <ul class="list--nav"> 
     {% for link in menus.main-menu.links %} 
      {% assign child_list_handle = link.title | handleize %} 
      {% if menus[child_list_handle].links != blank %} 
      <li class="site-nav--has-submenu site-nav__element"> 
       {% if link.title == 'Shop' %} 
       <button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}"> 
       {{ link.title }} 

       <span>+</span> 
       </button> 
       <button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}"> 
       {{ link.title }} 
       <span>-</span> 
       </button> 

       <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false"> 
       {% for childlink in menus[child_list_handle].links %} 
        <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}"> 

        <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a> 
        </li> 
       {% endfor %} 
       </ul> 
      </li> 
      {% else %} 
       <button class="site-nav__link btn--link site-nav__expand hidden" id="hideOnLargeScreen" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}"> 
       {{ link.title }} 

       <span>+</span> 
       </button> 
       <button class="site-nav__link btn--link site-nav__collapse" id="hideOnLargeScreen" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}"> 
       {{ link.title }} 
       <span>-</span> 
       </button> 

       <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" id="hideOnLargeScreen" aria-hidden="false"> 
       {% for childlink in menus[child_list_handle].links %} 
        <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}"> 

        <a href="{{ childlink.url }}" class="site-nav__link" id="hideOnLargeScreen">{{ childlink.title | escape }}</a> 
        </li> 
       {% endfor %} 
       </ul> 


      {% endif %} 
      {% else %} 
      <li class="site-nav__element {% if link.active %}site-nav--active{% endif %}"> 
       {% if link.title == 'Shop' %} 
       <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a> 
       {% else %} 
       <a href="{{ link.url }}" class="site-nav__link" id="hideOnLargeScreen">{{ link.title }}</a> 
       {% endif %} 
      </li> 
      {% endif %} 
     {% endfor %} 
     {% if shop.customer_accounts_enabled %} 
      {% if customer %} 
      <li> 
       <a href="/account" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.account' | t }}</a> 
      </li> 
      <li> 
       <a href="/account/logout" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_out' | t }}</a> 
      </li> 
      {% else %} 
      <li> 
       <a href="/account/login" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_in' | t }}</a> 
      </li> 
      <li> 
       <a href="/account/register" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.create_account' | t }}</a> 
     </li> 
      {% endif %} 
     {% endif %} 
     </ul> 
    {% include 'custom.social-bar' %} 
    </div> 
    <hr class="medium-up--hide hr--small {% if template == 'index' %}{% if settings.home_section_1 == 'banner-image' or settings.home_section_1 == 'featured-products' %}hr--border-bottom{% endif %}{% endif %}"> 
    </nav> 

Answer 1

Это ничего, что относится к жидкости или Shopify. Вы легко можете сделать это с помощью общих решений. Например, вы могли бы использовать JQuery, поставив что-то подобное в вашей теме JS файл:

$(window).resize(function() { 
    if ($(window).width() < 700) { // Size of "small" 
     $('.list--nav ul').addClass('site-nav__submenu--expanded').removeClass('site-nav__submenu--expand'); 
    } else { 
     $('.list--nav ul').addClass('site-nav__submenu--expand').removeClass('site-nav__submenu--expanded'); 
    } 
}); 

Но вы также можете поместить CSS код .Выходные-nav__submenu - расшириться в качестве условия для больших устройств, таких как:

@media (min-width:960px) { 
    .site-nav__submenu--expand {...} 
}