header fix1
This commit is contained in:
@@ -199,7 +199,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: min(360px, 100%);
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: var(--color-bg);
|
background: var(--color-bg);
|
||||||
@@ -247,6 +247,46 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-menu__catalog-toggle {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu__catalog-toggle::after {
|
||||||
|
content: "";
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-right: 2px solid currentColor;
|
||||||
|
border-bottom: 2px solid currentColor;
|
||||||
|
transform: rotate(45deg) translateY(-2px);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu__catalog-toggle[aria-expanded="true"]::after {
|
||||||
|
transform: rotate(225deg) translate(-2px, -2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu__catalog-list {
|
||||||
|
display: grid;
|
||||||
|
padding: 4px 0 10px 18px;
|
||||||
|
background: var(--color-surface-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu__catalog-list[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu__catalog-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 42px;
|
||||||
|
border-bottom: 1px solid var(--color-line);
|
||||||
|
color: var(--color-muted);
|
||||||
|
font-size: var(--fz-sm);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
background: var(--color-text);
|
background: var(--color-text);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|||||||
@@ -3,6 +3,8 @@
|
|||||||
var menu = document.querySelector('[data-mobile-menu]');
|
var menu = document.querySelector('[data-mobile-menu]');
|
||||||
var toggle = document.querySelector('[data-menu-toggle]');
|
var toggle = document.querySelector('[data-menu-toggle]');
|
||||||
var closeNodes = document.querySelectorAll('[data-menu-close]');
|
var closeNodes = document.querySelectorAll('[data-menu-close]');
|
||||||
|
var mobileCatalogToggle = document.querySelector('[data-mobile-catalog-toggle]');
|
||||||
|
var mobileCatalog = document.querySelector('[data-mobile-catalog]');
|
||||||
var catalogItem = document.querySelector('.site-header__menu-item--catalog');
|
var catalogItem = document.querySelector('.site-header__menu-item--catalog');
|
||||||
var catalogButton = document.querySelector('.site-header__menu-button');
|
var catalogButton = document.querySelector('.site-header__menu-button');
|
||||||
var cookieNote = document.querySelector('[data-cookie-note]');
|
var cookieNote = document.querySelector('[data-cookie-note]');
|
||||||
@@ -22,6 +24,11 @@
|
|||||||
body.classList.toggle('menu-is-open', isOpen);
|
body.classList.toggle('menu-is-open', isOpen);
|
||||||
menu.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
|
menu.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
|
||||||
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||||
|
|
||||||
|
if (!isOpen && mobileCatalogToggle && mobileCatalog) {
|
||||||
|
mobileCatalogToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
mobileCatalog.hidden = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setLeadModalState(isOpen, source) {
|
function setLeadModalState(isOpen, source) {
|
||||||
@@ -97,6 +104,14 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (mobileCatalogToggle && mobileCatalog) {
|
||||||
|
mobileCatalogToggle.addEventListener('click', function () {
|
||||||
|
var isOpen = mobileCatalogToggle.getAttribute('aria-expanded') === 'true';
|
||||||
|
mobileCatalogToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||||
|
mobileCatalog.hidden = isOpen;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (catalogItem && catalogButton) {
|
if (catalogItem && catalogButton) {
|
||||||
catalogButton.addEventListener('click', function (event) {
|
catalogButton.addEventListener('click', function (event) {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|||||||
@@ -76,7 +76,17 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||||||
</div>
|
</div>
|
||||||
<nav class="mobile-menu__nav" aria-label="Мобильная навигация">
|
<nav class="mobile-menu__nav" aria-label="Мобильная навигация">
|
||||||
<a class="mobile-menu__link" href="<?php echo esc_url( home_url( '/' ) ); ?>">Главная</a>
|
<a class="mobile-menu__link" href="<?php echo esc_url( home_url( '/' ) ); ?>">Главная</a>
|
||||||
<?php foreach ( sev_tort_nav_pages() as $item ) : ?>
|
<div class="mobile-menu__catalog">
|
||||||
|
<button class="mobile-menu__link mobile-menu__catalog-toggle" type="button" aria-expanded="false" aria-controls="mobile-catalog-list" data-mobile-catalog-toggle>Каталог</button>
|
||||||
|
<div class="mobile-menu__catalog-list" id="mobile-catalog-list" data-mobile-catalog hidden>
|
||||||
|
<?php foreach ( array( 'torty-na-zakaz', 'bento', 'detskie', 'svadebnye', 'korporativnye', 'na-den-rozhdeniya', 'srochnyj-zakaz', 'nachinki' ) as $slug ) : ?>
|
||||||
|
<?php $item = sev_tort_pages()[ $slug ]; ?>
|
||||||
|
<a class="mobile-menu__catalog-link" href="<?php echo esc_url( home_url( '/' . $item['slug'] . '/' ) ); ?>"><?php echo esc_html( $item['label'] ); ?></a>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php foreach ( array( 'ceny', 'dostavka-i-oplata', 'portfolio', 'otzyvy', 'faq', 'kontakty' ) as $slug ) : ?>
|
||||||
|
<?php $item = sev_tort_pages()[ $slug ]; ?>
|
||||||
<a class="mobile-menu__link" href="<?php echo esc_url( home_url( '/' . $item['slug'] . '/' ) ); ?>"><?php echo esc_html( $item['label'] ); ?></a>
|
<a class="mobile-menu__link" href="<?php echo esc_url( home_url( '/' . $item['slug'] . '/' ) ); ?>"><?php echo esc_html( $item['label'] ); ?></a>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Reference in New Issue
Block a user