StoreFront – выезжающее боковое меню на мобильных
Для темы StoreFront есть официальный плагин для бокового меню на мобильных и планшетах Storefront Hamburger Menu.
Немного доработаем меню – скроем необязательный текст, анимируем закрытие бургер-меню и успокоим тень.
Немного магии в CSS:
/* Tablet & Mobile */
@media (max-width: 767px) {
button.menu-toggle {
border: 0;
padding-left: 1em;
}
button.menu-toggle span {
font-size:0;
}
button.menu-toggle::before, button.menu-toggle::after, button.menu-toggle span::before {
width: 28px;
left: 0!important;
}
.storefront-hamburger-menu-active .main-navigation.toggled button.menu-toggle span:before {
opacity: 0;
}
button.menu-toggle::before {
transform: translateY(-8px);
}
.storefront-hamburger-menu-active .main-navigation.toggled button.menu-toggle::before {
transform: rotate(45deg);
}
button.menu-toggle::after {
transform: translateY(8px);
}
.storefront-hamburger-menu-active .main-navigation.toggled button.menu-toggle::after {
transform: rotate(-45deg);
}
.shm-close {
display: none!important;
}
.storefront-hamburger-menu-active .main-navigation.toggled div.menu {
box-shadow: 0 0 2em rgb(0 0 0 / 20%);
}
}
