/* * Мобильное меню для темы XmarkUp: боковая шторка + вертикальная кнопка * Подключается из functions.php после style.css и css/style-xs.css. * * Составные части (все только для экранов <= 770px): * .mobile-menu-toggle — кнопка в шапке (отключена, разметки нет) * .mobile-menu-fab — вертикальная кнопка "Меню" у левого края, переливается * .mobile-menu-panel — шторка с разделами, выезжает слева * .mobile-menu-overlay — затемнение под шторкой * * Состояния ставит js/mobile-menu.js на тег : * .is-menu-open — шторка открыта * .is-scrolled — кнопку можно показать (ставится сразу при загрузке) * * Точка переключения 770px должна совпадать с BREAKPOINT в js/mobile-menu.js */ /* ========== ДЕСКТОП: ничего из этого не видно ========== */ .mobile-menu-toggle, .mobile-menu-fab, .mobile-menu-overlay, .mobile-menu-panel__head, .mobile-menu-panel__hint, .mobile-header-banner { display: none; } /* ========== МОБИЛЬНАЯ ВЕРСИЯ ========== */ @media (max-width: 770px) { /* старый текстовый переключатель темы */ .menu-search-hidden { display: none !important; } #header nav[role="navigation"] { overflow: hidden; } /* ---------- 0. БАННЕР В ШАПКЕ ---------- Картинка под шапкой, всегда по центру. Загружается в «Внешний вид → Настроить → Баннер в шапке (телефоны)». Максимальная высота задаётся там же и приходит инлайн-стилем. Когда баннер загружен, на
стоит класс has-mobile-banner и мобильный баннер ПОЛНОСТЬЮ заменяет изображение заголовка: десктопная картинка на телефонах не выводится. На ширине больше 770px всё наоборот — работает только изображение заголовка. Хотите показывать обе картинки сразу — уберите правило #header.has-mobile-banner #logo-site ниже. */ #header.has-mobile-banner #logo-site { display: none; /* десктопный баннер на телефонах не показываем */ } #header .mobile-header-banner { display: block; clear: both; margin: 0 auto; padding: 22px 0 18px; text-align: center; /* центрирование картинки */ line-height: 0; /* убирает лишний зазор под img */ } #header .mobile-header-banner__link { display: inline-block; max-width: 100%; line-height: 0; border: 0; text-decoration: none !important; } #header .mobile-header-banner img { display: inline-block; width: auto; max-width: 100%; /* не вылезает за края экрана */ height: auto; max-height: 90px; /* перебивается значением из настроек */ margin: 0 auto; border: 0; border-radius: 4px; vertical-align: top; } /* ---------- 1. КНОПКА В ШАПКЕ — ОТКЛЮЧЕНА ---------- В мобильной версии меню в шапке нет совсем: страница начинается без него, меню открывается только полукруглой кнопкой (пункт 2). Разметка кнопки удалена из header.php, правило ниже — страховка на случай, если её вернут. */ .mobile-menu-toggle { display: none !important; } /* Стили трёх полосок оставлены на случай, если захотите добавить иконку-гамбургер внутрь полукруглой кнопки */ .mobile-menu-toggle__bars { position: relative; display: inline-block; width: 20px; height: 15px; vertical-align: middle; } .mobile-menu-toggle__bars span { position: absolute; left: 0; display: block; width: 100%; height: 2px; background: #f6f6f6; border-radius: 2px; } .mobile-menu-toggle__bars span:nth-child(1) { top: 0; } .mobile-menu-toggle__bars span:nth-child(2) { top: 6px; } .mobile-menu-toggle__bars span:nth-child(3) { top: 12px; } /* ---------- 2. ВЕРТИКАЛЬНАЯ КНОПКА МЕНЮ У ЛЕВОГО КРАЯ ---------- Узкая вытянутая плашка, прижатая вплотную к левому краю экрана — с той же стороны, откуда выезжает меню. Скруглена справа (та сторона, что смотрит на страницу), слева ровная, за счёт этого выглядит приклеенной к краю. Надпись «Меню» повёрнута на 90° и читается сверху вниз. position: fixed — при прокрутке остаётся на одном месте. Фон однотонный (#f1c748), от кнопки расходятся волны — анимация mmPulse, объявлена в конце этого файла. Крупнее / мельче: width + height + font-size (радиус ~ 1/6 высоты) Скруглить все четыре угла: border-radius: 14px Перенести к правому краю: left: auto; right: 0; border-radius: 14px 0 0 14px Выровнять по центру экрана: top: 50%; margin-top: -44px */ .mobile-menu-fab { display: block; position: fixed; left: 0; /* вплотную к левому краю */ top: 96px; /* отступ сверху — меняйте здесь */ z-index: 9997; width: 28px; height: 88px; /* длина плашки */ margin: 0; padding: 0; border: 0; border-radius: 0 14px 14px 0; /* скругление справа */ background: #f1c748; /* цвет кнопки */ -webkit-animation: mmPulse 2.6s ease-in-out infinite; animation: mmPulse 2.6s ease-in-out infinite; color: #fff; font-family: Arial, Verdana, Geneva, sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); cursor: pointer; overflow: hidden; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* появление */ opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, filter .15s ease; } .mobile-menu-fab::-moz-focus-inner, .mobile-menu-close::-moz-focus-inner { border: 0; padding: 0; } /* надпись, повёрнутая на 90°, ровно по центру плашки */ .mobile-menu-fab__text { position: absolute; top: 50%; left: 50%; display: block; line-height: 1; white-space: nowrap; -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-transform-origin: center center; transform-origin: center center; } .mobile-menu-fab:active { filter: brightness(.85); } /* кнопка на месте (класс ставит JS сразу при загрузке) */ html.is-scrolled .mobile-menu-fab { opacity: 1; visibility: visible; } /* при открытой шторке кнопка не нужна */ html.is-menu-open .mobile-menu-fab { opacity: 0; visibility: hidden; } /* ---------- 3. ЗАТЕМНЕНИЕ ---------- */ .mobile-menu-overlay { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; -webkit-tap-highlight-color: transparent; } html.is-menu-open .mobile-menu-overlay { opacity: 1; visibility: visible; } /* ---------- 4. ШТОРКА С РАЗДЕЛАМИ ---------- */ .mobile-menu-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 9999; width: 78%; max-width: 320px; background: #110d0e; border-right: 1px solid rgba(255, 255, 255, .12); box-shadow: 2px 0 20px rgba(0, 0, 0, .45); overflow-y: auto; /* длинное меню прокручивается */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(-100%); /* спрятана за левым краем */ visibility: hidden; transition: transform .26s ease, visibility .26s ease; } @supports (padding: env(safe-area-inset-top)) { .mobile-menu-panel { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } html.is-menu-open .mobile-menu-panel { transform: translateX(0); visibility: visible; } /* блокировка прокрутки страницы под шторкой */ html.is-menu-open, html.is-menu-open body { overflow: hidden; } /* шапка шторки */ .mobile-menu-panel__head { display: block; position: relative; padding: 16px 52px 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .mobile-menu-panel__title { color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; } /* логотип в шапке шторки (загружается в Внешний вид → Настроить → Мобильное меню) */ #header .mobile-menu-panel__logo { display: block; line-height: 0; } #header .mobile-menu-panel__logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 40px; /* перебивается инлайновым style из настроек */ border: 0; } .mobile-menu-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #f6f6f6; font: 27px/38px Arial, Helvetica, sans-serif; text-align: center; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(255, 255, 255, .15); touch-action: manipulation; } .mobile-menu-close:active { color: #a3c4db; } /* сам список разделов */ #header .mobile-menu-panel > .menu { display: block; float: none; width: auto; height: auto; margin: 0; padding: 6px 0 24px; list-style: none; } #header .mobile-menu-panel > .menu > li { display: block; float: none; width: auto; margin: 0; padding: 0; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .09); } #header .mobile-menu-panel > .menu > li > a { display: block; float: none; margin: 0; padding: 14px 18px; color: #f6f6f6 !important; font-size: 15px; line-height: 1.25; text-align: left; text-decoration: none !important; text-transform: uppercase; } #header .mobile-menu-panel > .menu > li > a:active, #header .mobile-menu-panel > .menu > li > a:hover { color: #a3c4db !important; background: rgba(255, 255, 255, .06); } /* текущий раздел */ #header .mobile-menu-panel > .menu > .current-menu-item > a, #header .mobile-menu-panel > .menu > .current_page_item > a { color: #b7b7b7 !important; box-shadow: inset 3px 0 0 #8cba94; } /* вложенные пункты */ #header .mobile-menu-panel .sub-menu, #header .mobile-menu-panel .children { display: block; float: none; width: auto; margin: 0; padding: 0; list-style: none; background: rgba(255, 255, 255, .04); } #header .mobile-menu-panel .sub-menu li, #header .mobile-menu-panel .children li { display: block; float: none; width: auto; margin: 0; border-top: 1px solid rgba(255, 255, 255, .07); } #header .mobile-menu-panel .sub-menu a, #header .mobile-menu-panel .children a { display: block; padding: 12px 18px 12px 34px; color: #dcdcdc !important; font-size: 14px; text-transform: none; } /* подсказка про свайп внизу шторки (можно удалить весь блок) */ #header .mobile-menu-panel__hint { display: block; padding: 14px 18px 0; color: #6f6f6f; font-size: 12px; line-height: 1.4; } } /* ========== АНИМАЦИИ КНОПКИ МЕНЮ ========== mmPulse — волны, расходящиеся от кнопки. Скорость 2.6s задана в свойстве animation выше, больше число — медленнее. mmShimmer — перелив цветов. СЕЙЧАС НЕ ИСПОЛЬЗУЕТСЯ, оставлен на случай, если захотите вернуть градиент вместо однотонного фона. */ @-webkit-keyframes mmShimmer { 0% { background-position: 50% 0; } 100% { background-position: 50% 100%; } } @keyframes mmShimmer { 0% { background-position: 50% 0; } 100% { background-position: 50% 100%; } } @-webkit-keyframes mmPulse { 0% { box-shadow: 0 3px 12px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, .40); } 70% { box-shadow: 0 3px 12px rgba(0, 0, 0, .3), 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes mmPulse { 0% { box-shadow: 0 3px 12px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, .40); } 70% { box-shadow: 0 3px 12px rgba(0, 0, 0, .3), 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 255, 255, 0); } } /* Уважение к системной настройке "уменьшить анимацию" */ @media (prefers-reduced-motion: reduce) { .mobile-menu-panel, .mobile-menu-overlay, .mobile-menu-fab { transition: none; } .mobile-menu-fab { -webkit-animation: none; animation: none; box-shadow: 0 3px 12px rgba(0, 0, 0, .3); } }