Tạo file riêng để css: tzn_mega_menu.css
.header__inline-menu .mega-menu__content ul.mega-menu__list {
display: flex;
flex-direction: column;
gap: 0 !important;
max-width: 63rem;
position: relative;
}
.header__inline-menu .mega-menu__content {
background-color: #fff;
padding-bottom: 2.5rem;
padding-top: 2.5rem;
border: 0;
overflow: hidden;
border-top: .1px solid #000 !important;
}
.mega-menu__list>li:last-child a
.mega-menu__list .mega-menu__link.mega-menu__link--level-2 {
font-size: 1rem;
font-family: var(--text-semibold);
letter-spacing: .48px;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list > li:nth-child(1):after {
content: '';
display: block;
position: absolute;
left: 12rem;
top: 0;
width: 1px;
height: 100%;
background-color: var(--primary-color);
opacity: .5;
}
.mega-menu__list .mega-menu__link+ul {
position: absolute;
top: 0;
left: 15rem;
min-width: 20rem;
grid-template-columns: 1fr 1fr;
display: none;
}
.mega-menu__list .mega-menu__link+ul > li {
width: 100%;
}
.mega-menu__list .mega-menu__link+ul>li .mega-menu__link {
color: #464646;
font-size: 1rem;
font-family: var(--font-body-family);
padding-bottom: .75rem;
}
.mega-menu__list .mega-menu__link+ul>li .mega-menu__link:hover{
color: var(--primary-color);
}
.image-menu-collection img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-menu-collection {
max-width: 17.938rem;
position: absolute;
right: 2.5rem;
top: -3.25rem;
display: none;
height: 17.938rem;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list>li > a.showing + ul + .image-menu-collection {
display: block;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list>li > a.showing + ul{
display: grid;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list>li>a {
display: inline-block;
margin-bottom: 0;
position: relative;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list>li>a:before {
content: "";
border: 1px solid #B99F60;
border-radius: 20px;
height: 100%;
width: calc(100% + 1.5rem);
position: absolute;
left: -.75rem;
top: -.25rem;
opacity: 0;
transition: all .4s;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list>li>a:hover:before{
opacity: 1;
}
.header__inline-menu .mega-menu__content ul.mega-menu__list>li>a:hover{
color: var(--primary-color);
}
.has_sub svg.icon.icon-caret {
color: #464646;
width: .875rem;
transform: rotate(-90deg) translateX(1px);
}
a.all--product {
display: flex;
max-width: 63rem;
margin: 0 auto 1rem;
padding-left: 1.25rem;
color: #464646;
font-size: 1rem;
font-family: var(--text-bold);
}
a.all--product svg {
max-width: .875rem;
transform: rotate(-90deg) translateX(-1px);
margin-left: .25rem;
}Tùy chỉnh file header-mega-menu.liquid theo từng dự án.
{% comment %}
Renders a megamenu for the header.
Usage:
{% render 'header-mega-menu' %}
{% endcomment %}
<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 }}" class="mega-menu">
<summary
id="HeaderMenu-{{ link.handle }}"
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>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<div
id="MegaMenu-Content-{{ forloop.index }}"
class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
tabindex="-1"
>
<a
href="{{ link.url }}"
class="all--product"
>
Alle Produkte
{{- 'icon-caret.svg' | inline_asset_content -}}
</a>
<ul
class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
role="list"
>
{%- for childlink in link.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="{% if forloop.index == 1 %}showing {% endif %}{% if childlink.links != blank -%}has_sub {% endif %}mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
{% if childlink.links != blank -%}
{{- 'icon-caret.svg' | inline_asset_content -}}
{% endif %}
</a>
{%- if childlink.links != blank -%}
<ul class="list-unstyled" role="list">
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- assign collection_handle = childlink.url | split: '/' | last -%}
{%- assign collection = collections[collection_handle] -%}
{%- if collection and collection.image -%}
<div class="image-menu-collection">
<img
src="{{ collection.image | img_url: 'master' }}"
alt="{{ collection.title | escape }}"
class="mega-menu__image"
/>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
</details>
</header-menu>
{%- else -%}
<a
id="HeaderMenu-{{ link.handle }}"
href="{{ link.url }}"
class="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>
Thêm js
$('.header__inline-menu .mega-menu__content ul.mega-menu__list>li>a.has_sub').click(function (e) {
e.preventDefault();
$('.header__inline-menu .mega-menu__content ul.mega-menu__list>li>a.has_sub').removeClass('showing');
$(this).addClass('showing');
});