这里的逻辑很简单，我希望能够做的就是将该菜单项转换为shopify中的两列，因为shopify正在使用一些循环我认为也许javascript可能是一个更容易改变你觉得怎么样？我怎么能把它改成两列？
或者，如果您了解液体代码，那么请给我一些建议如何修改它以使用两列？
伪？：
if menu items not extend outside viewport then
half menu items and create 2 columns?
end if
来源：
<ul>
<li class="mobile-link">
<form class="search-form" action="/search" method="get">
<input class="search-input" name="q" type="text" placeholder="{{ 'layout.header.search_placeholder' | t }}" value="{{ search.terms }}" />
<input type="submit" value="" />
</form>
</li>
{% for link in linklists.main-menu.links %}
{% include 'has-dropdown' %}
<li class="{% if hasDropdown %}has-dropdown{% elsif hasMegaNav %}has-mega-nav{% endif %} {% include 'for-looper' %}" {% if hasMegaNav %}data-mega-nav="true"{% endif %}>
<a data-linklist-trigger="{{ link.title | downcase | handle }}" href="{{ link.url }}">{{ link.title }} {% if hasDropdown or hasMegaNav %}<span class="enter-linklist"></span>{% endif %}</a>
{% if hasDropdown %}
<ul data-linklist="{{ linkHandle }}">
<li>
<span class="back"><span class="icon"></span> {{ 'layout.mobile_navigation.back' | t }}</span>
</li>
{% for link in linklists[linkHandle].links %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
{% elsif hasMegaNav %}
<ul class="mobile-mega-nav" data-linklist="{{ linkHandle }}">
<li>
<span class="back"><span class="icon"></span> {{ 'layout.mobile_navigation.back' | t }}</span>
</li>
{% assign items = 'mega-nav-1|mega-nav-2|mega-nav-3' | split: '|' %}
{% assign itemCount = 0 %}
{% for item in items %}
{% capture enabled %}{{ item }}{% endcapture %}
{% assign linklist = settings[enabled] %}
{% if linklists[linklist].links.size > 0 %}
<li class="has-dropdown">
<a data-linklist-trigger="{{ linklists[linklist].title | downcase | handle }}" href="{{ linklists[linklist].url }}">{{ linklists[linklist].title }} {% if hasMegaNav %}<span class="enter-linklist"></span>{% endif %}</a>
<ul data-linklist="{{ linklists[linklist].title | downcase | handle }}">
<li>
<span class="back"><span class="icon"></span> {{ 'layout.mobile_navigation.back' | t }}</span>
</li>
{% for link in linklists[linklist].links %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
{% assign items = 'mega-nav-1|mega-nav-2|mega-nav-3' | split: '|' %}
{% assign itemCount = 0 %}
{% for item in items %}
{% capture enabled %}{{ item }}{% endcapture %}
{% if settings[enabled] %}
{% assign itemCount = itemCount | plus: 1 %}
{% endif %}
{% endfor %}
{% if itemCount > 0 %}
<div class="mega-nav">
{% if settings.mega-nav-image %}
<figure class="mega-nav-image">
<img alt="{{ shop.name | escape }}" src="{{ 'mega-nav-image-default.jpg' | asset_url }}" data-image="{{ 'mega-nav-image-default.jpg' | asset_url }}" data-alt="{{ shop.name | escape }}">
</figure>
{% endif %}
<div class="mega-nav-list-wrapper">
{% for item in items %}
{% capture enabled %}{{ item }}{% endcapture %}
{% assign linklist = settings[enabled] %}
{% if linklists[linklist].links.size > 0 %}
<ul class="mega-nav-list">
<li class="mega-nav-list-title">{{ linklists[linklist].title }}</li>
{% for link in linklists[linklist].links %}
{% if settings.mega-nav-image %}
{% if settings.mega-nav-image %}
{% assign megaNavImageSrc = 'mega-nav-image-default.jpg' | asset_url %}
{% assign megaNavImageAlt = shop.name %}
{% else %}
{% assign megaNavImageSrc = 'no-image.svg' | asset_url %}
{% assign megaNavImageAlt = 'No image' %}
{% endif %}
{% assign item_type = 'none' %}
{% if link.url contains '/collections/' %}
{% assign item_type = 'collection' %}
{% elsif link.url contains '/products/' %}
{% assign item_type = 'product' %}
{% endif %}
{% if item_type == 'collection' %}
{% capture megaNavImageAlt %}{{ collections[link.handle].title | escape }}{% endcapture %}
{% if collections[link.handle].image %}
{% capture megaNavImageSrc %}{{ collections[link.handle] | img_url: 'large' }}{% endcapture %}
{% else %}
{% capture megaNavImageSrc %}{{ collections[link.handle].products.first | img_url: 'large' }}{% endcapture %}
{% endif %}
{% elsif item_type == 'product' %}
{% capture megaNavImageAlt %}{{ link.title | escape }}{% endcapture %}
{% for product in collections['all'].products %}
{% if product.handle == link.handle %}
{% capture megaNavImageSrc %}{{ product | img_url: 'large' }}{% endcapture %}
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
<li data-image-src="{{ megaNavImageSrc }}" data-image-alt="{{ megaNavImageAlt }}"><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% endif %}
</li>
{% endfor %}
{% if shop.customer_accounts_enabled %}
<li class="mobile-link">
{% if customer %}
<a href="/account">{{ 'layout.header.my_account' | t }}</a>
{% else %}
{{ 'layout.header.account' | t | customer_login_link }}
{% endif %}
</li>
{% endif %}
</ul>