为超级菜单每 5 列呈现新行 Shopify Liquid

问题描述

我目前正在为我的网站添加一个大型菜单。我使用的主题是仓库。它有一个内置的超级菜单选项，但它不允许我创建多于一行的类别。截至目前，我的 megamenu 中有 1 行 10 列，但我希望它是 2 行，每行 5 列。

这是超级菜单代码。任何帮助将不胜感激

{%- if section.settings.desktop_navigation_layout == 'condensed' -%}
{%- assign is_condensed = true -%}
{%- else -%}
{%- assign is_condensed = false -%}
{%- endif -%}
{%- assign downcase_title = mega_menu.title | downcase | strip -%}
{%- assign mega_menu_block = nil -%}
{%- for block in section.blocks -%}
{%- assign downcase_block_menu_item = block.settings.menu_item | downcase | strip -%}
{%- if downcase_block_menu_item == downcase_title -%}
{%- assign mega_menu_block = block -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<div id="dropdown-{{ index }}" class="mega-menu {% if is_floating %}mega-menu--floating{% endif %}" data-type="menu" aria-hidden="true" {{ mega_menu_block.shopify_attributes }}>
{%- capture mega_menu_inner -%}
{%- assign should_center = false -%}
{%- unless is_floating -%}
{%- assign should_center = true -%}
{%- endunless -%}
{%- assign has_two_images = false -%}
{%- if mega_menu_block.settings.image_1 != blank and mega_menu_block.settings.image_2 != blank -%}
{%- assign has_two_images = true -%}
{%- endif -%}
{%- assign mega_menu_classes = '' -%}
{%- if should_center and mega_menu.links.size >= 4 -%}
{%- if has_two_images -%}
{%- assign mega_menu_classes = 'mega-menu__inner--center' -%}
{%- else -%}
{%- assign mega_menu_classes = 'mega-menu__inner--center mega-menu__inner--large' -%}
{%- endif -%}
{%- endif -%}
<div class="mega-menu__inner {{ mega_menu_classes }}">
{%- if mega_menu.links.size > 0 -%}
{%- capture mega_menu_columns -%}
{%- for link in mega_menu.links -%}
<div class="mega-menu__column">
<span class="mega-menu__title heading">{{ link.title }}</span>
{%- if link.links.size > 0 -%}
<ul class="mega-menu__linklist">
{%- for sub_link in link.links -%}
<li class="mega-menu__item">
<a href="{{ sub_link.url }}" class="mega-menu__link link">{{ sub_link.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endfor -%}
{%- endcapture -%}
{%- if is_floating -%}
{%- comment -%}
IMPLEMENTATION NOTE: 230 is the size in pixel of a given column (it's 170 + 60 of margin). In order to avoid setting it in JS or having very complex HTML structure to achieve positioning,I used this trick.
{%- endcomment -%}
<div class="mega-menu__column-list" style="width: {{ 230 | times: mega_menu.links.size }}px">
{{- mega_menu_columns -}}
</div>
{%- else -%}
{{- mega_menu_columns -}}
{%- endif -%}
{%- endif -%}
{%- if mega_menu_block.settings.image_1 != blank -%}
<a href="{{ mega_menu_block.settings.image_1_link | default: '#' }}" class="mega-menu__promo">
<div class="mega-menu__image-wrapper">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: mega_menu_block.settings.image_1.aspect_ratio }}%">
<img class="lazyload image--fade-in" data-src="{{ mega_menu_block.settings.image_1 | img_url: '550x' }}" alt="{{ mega_menu_block.settings.image_1.alt | escape }}">
</div>
</div>
<span class="mega-menu__image-heading heading h4">{{ mega_menu_block.settings.image_1_heading | escape }}</span>
<p class="mega-menu__image-text">{{ mega_menu_block.settings.image_1_text | escape }}</p>
</a>
{%- endif -%}
{%- if mega_menu_block.settings.image_2 != blank -%}
<a href="{{ mega_menu_block.settings.image_2_link | default: '#' }}" class="mega-menu__promo">
<div class="mega-menu__image-wrapper">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: mega_menu_block.settings.image_2.aspect_ratio }}%">
<img class="lazyload image--fade-in" data-src="{{ mega_menu_block.settings.image_2 | img_url: '550x' }}" alt="{{ mega_menu_block.settings.image_2.alt | escape }}">
</div>
</div>
<span class="mega-menu__image-heading heading h4">{{ mega_menu_block.settings.image_2_heading | escape }}</span>
<p class="mega-menu__image-text">{{ mega_menu_block.settings.image_2_text | escape }}</p>
</a>
{%- endif -%}
</div>
{%- endcapture -%}
{%- if is_condensed -%}
{{- mega_menu_inner -}}
{%- else -%}
<div class="container">
{{- mega_menu_inner -}}
</div>
{%- endif -%}
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）