Skip to content

Fix mobile Mega Menu UX — independent column toggles, optional titles, improved hamburger #831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CySSoO wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix mobile Mega Menu UX — independent column toggles, optional titles, improved hamburger #831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 103 additions & 0 deletions views/css/everblock.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,29 @@
min-width: 100%;
}

.everblock-megamenu .navbar-toggler.everblock-megamenu-toggler {
border: 1px solid currentColor;
border-radius: 0.5rem;
padding: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
background-color: transparent;
z-index: calc(var(--everblock-megamenu-zindex) + 20);
}

.everblock-megamenu-toggler-icon {
width: 1.5rem;
height: 1.2rem;
display: block;
background:
linear-gradient(currentColor 0 0) 0 0 / 100% 2px,
linear-gradient(currentColor 0 0) 0 50% / 100% 2px,
linear-gradient(currentColor 0 0) 0 100% / 100% 2px;
background-repeat: no-repeat;
}

.everblock-megamenu-item > .everblock-megamenu-item-link,
.everblock-megamenu-item > .everblock-megamenu-item-link.btn,
.everblock-megamenu-title,
Expand Down Expand Up @@ -132,6 +155,33 @@
padding: 0;
}

.everblock-megamenu-item-header {
gap: 0.75rem;
}

.everblock-megamenu .everblock-megamenu-toggle {
border: 0;
padding: 0.25rem;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
}

.everblock-megamenu .everblock-megamenu-toggle.dropdown-toggle::after {
display: none;
}

.everblock-megamenu-toggle-icon {
width: 0.65rem;
height: 0.65rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
display: inline-block;
}

.everblock-megamenu .everblock-megamenu-dropdown {
padding: 1.5rem 0;
}
Expand Down Expand Up @@ -184,10 +234,63 @@

@media (max-width: 991.98px) {
.everblock-megamenu .everblock-megamenu-collapse {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
overflow-y: auto;
padding: 4.5rem 1rem 2rem;
background-color: var(--everblock-megamenu-bg-active);
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}

.everblock-megamenu .dropdown-menu {
position: static;
width: 100%;
box-shadow: none;
}

.everblock-megamenu .dropdown-menu.everblock-megamenu-dropdown {
padding: 0.75rem 0;
}

.everblock-megamenu-mobile-column + .everblock-megamenu-mobile-column {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.everblock-megamenu-mobile-toggle {
width: 100%;
border: 0;
background: transparent;
color: inherit;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0;
font-weight: 600;
}

.everblock-megamenu-mobile-icon {
width: 0.7rem;
height: 0.7rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
}

.everblock-megamenu-mobile-toggle[aria-expanded="true"] .everblock-megamenu-mobile-icon {
transform: rotate(-135deg);
}

.everblock-megamenu-mobile-body {
padding: 0.5rem 0 1rem;
}
}
/* Lookbook product markers */

Expand Down
4 changes: 2 additions & 2 deletions views/templates/hook/prettyblocks/prettyblock_megamenu_container.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
{assign var='obfme_class' value=' obfme'}
{/if}
<nav class="navbar navbar-expand-lg navbar-light everblock-megamenu{if $everblock_winter_mode} everblock-megamenu--winter{/if}{$prettyblock_visibility_class}" aria-label="{$menu_label|escape:'htmlall':'UTF-8'}"{if $megamenu_style_vars} style="{$megamenu_style_vars|escape:'htmlall':'UTF-8'}"{/if}>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#{$collapse_id}" aria-controls="{$collapse_id}" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<button class="navbar-toggler everblock-megamenu-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#{$collapse_id}" aria-controls="{$collapse_id}" aria-expanded="false" aria-label="Toggle navigation">
<span class="everblock-megamenu-toggler-icon" aria-hidden="true"></span>
</button>
<div class="collapse navbar-collapse everblock-megamenu-collapse w-100" id="{$collapse_id}">
<ul class="navbar-nav w-100">
Expand Down
59 changes: 39 additions & 20 deletions views/templates/hook/prettyblocks/prettyblock_megamenu_item.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,22 @@
{assign var='obfme_class' value=' obfme'}
{/if}
<li id="block-{$block.id_prettyblocks}" class="nav-item{if $has_dropdown} dropdown{/if}{$prettyblock_visibility_class} everblock-megamenu-item"{if $megamenu_style_vars} style="{$megamenu_style_vars|escape:'htmlall':'UTF-8'}"{/if}>
{if $menu_url}
<a class="nav-link everblock-megamenu-item-link{if $has_dropdown} dropdown-toggle{/if}{$obfme_class}" href="{$menu_url|escape:'htmlall':'UTF-8'}" title="{$menu_label|escape:'htmlall':'UTF-8'}"{if $has_dropdown} id="{$menu_toggle_id}" role="button" data-bs-toggle="dropdown" aria-expanded="false"{/if}>
{$menu_label|escape:'htmlall':'UTF-8'}
</a>
{else}
<button class="nav-link btn btn-link everblock-megamenu-item-link{if $has_dropdown} dropdown-toggle{/if}" type="button"{if $has_dropdown} id="{$menu_toggle_id}" data-bs-toggle="dropdown" aria-expanded="false"{/if}>
{$menu_label|escape:'htmlall':'UTF-8'}
</button>
{/if}
<div class="everblock-megamenu-item-header d-flex d-lg-block align-items-center justify-content-between">
{if $menu_url}
<a class="nav-link everblock-megamenu-item-link{$obfme_class}" href="{$menu_url|escape:'htmlall':'UTF-8'}" title="{$menu_label|escape:'htmlall':'UTF-8'}">
{$menu_label|escape:'htmlall':'UTF-8'}
</a>
{else}
<span class="nav-link everblock-megamenu-item-link" aria-label="{$menu_label|escape:'htmlall':'UTF-8'}">
{$menu_label|escape:'htmlall':'UTF-8'}
</span>
{/if}
{if $has_dropdown}
<button class="btn everblock-megamenu-toggle dropdown-toggle d-lg-none" type="button" id="{$menu_toggle_id}" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{$menu_label|escape:'htmlall':'UTF-8'}">
<span class="everblock-megamenu-toggle-icon" aria-hidden="true"></span>
</button>
{/if}
</div>

{if $has_dropdown}
<div class="dropdown-menu everblock-megamenu-dropdown{if $block.settings.full_width} w-100{/if}" aria-labelledby="{$menu_toggle_id}" data-bs-popper="static">
Expand All @@ -57,29 +64,41 @@
</div>
</div>

<div class="d-lg-none accordion" id="everblock-megamenu-accordion-{$block.id_prettyblocks}">
<div class="d-lg-none everblock-megamenu-mobile">
{foreach from=$block.extra.columns item=column name=mobile_columns}
{assign var='column_title' value=$column.extra.title_label|default:$column.settings.title|default:$menu_label}
{assign var='column_title' value=$column.extra.title_label|default:$column.settings.title|default:''}
{if is_array($column_title)}
{if isset($language.id_lang) && isset($column_title[$language.id_lang])}
{assign var='column_title' value=$column_title[$language.id_lang]}
{else}
{assign var='column_title' value=$column_title|@reset}
{/if}
{/if}
<div class="accordion-item">
<div class="accordion-header h2" id="everblock-megamenu-heading-{$block.id_prettyblocks}-{$smarty.foreach.mobile_columns.iteration}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#everblock-megamenu-collapse-{$block.id_prettyblocks}-{$smarty.foreach.mobile_columns.iteration}" aria-expanded="false" aria-controls="everblock-megamenu-collapse-{$block.id_prettyblocks}-{$smarty.foreach.mobile_columns.iteration}">
{$column_title|escape:'htmlall':'UTF-8'}
</button>
</div>
<div id="everblock-megamenu-collapse-{$block.id_prettyblocks}-{$smarty.foreach.mobile_columns.iteration}" class="accordion-collapse collapse" aria-labelledby="everblock-megamenu-heading-{$block.id_prettyblocks}-{$smarty.foreach.mobile_columns.iteration}">
<div class="accordion-body">
{assign var='column_title' value=$column_title|default:''}
{assign var='has_column_title' value=($column_title|trim != '')}
{assign var='column_collapse_id' value="everblock-megamenu-collapse-`$block.id_prettyblocks`-`$smarty.foreach.mobile_columns.iteration`"}
<div class="everblock-megamenu-mobile-column{if $has_column_title} is-collapsible{/if}">
{if $has_column_title}
<div class="everblock-megamenu-mobile-header" id="everblock-megamenu-heading-{$block.id_prettyblocks}-{$smarty.foreach.mobile_columns.iteration}">
<button class="everblock-megamenu-mobile-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{$column_collapse_id}" aria-expanded="false" aria-controls="{$column_collapse_id}">
<span class="everblock-megamenu-mobile-title">{$column_title|escape:'htmlall':'UTF-8'}</span>
<span class="everblock-megamenu-mobile-icon" aria-hidden="true"></span>
</button>
</div>
<div id="{$column_collapse_id}" class="collapse">
<div class="everblock-megamenu-mobile-body">
<div class="row g-3">
{include file='module:everblock/views/templates/hook/prettyblocks/prettyblock_megamenu_column.tpl' block=$column from_parent=true render_title=false}
</div>
</div>
</div>
{else}
<div class="everblock-megamenu-mobile-body">
<div class="row g-3">
{include file='module:everblock/views/templates/hook/prettyblocks/prettyblock_megamenu_column.tpl' block=$column from_parent=true render_title=false}
</div>
</div>
</div>
{/if}
</div>
{/foreach}
</div>
Expand Down
Loading