CSS: готовые рецепты
Готовый CSS для того, чего нет в настройках. Скопируйте код кнопкой «Копировать» и вставьте в указанное поле Общие настройки → Пользовательский CSS. Цвета и размеры меняйте под свой сайт.
Содержание
- Верхний уровень: Анимированное подчёркивание при наведении, Полоска у текущего раздела другого цвета, Пункт-кнопка (например, «Заказать звонок»), Крупнее иконки у пунктов верхнего уровня, Мелкий подзаголовок под пунктом верхнего уровня
- Стрелки подменю: Стрелка поворачивается при открытии, «Плюс» вместо стрелки
- Подменю: Скруглённые углы и своя тень подменю, Пункты подменю появляются по очереди, Затемнение страницы, пока открыто мегаподменю, Одинаковая ширина всех выпадающих подменю, Мегаподменю на всю ширину экрана, содержимое по центру
- Колонки и заголовки: Заголовки колонок капителью с разрядкой, Линия под заголовком колонки толще и акцентного цвета, Вертикальные линии между колонками во всех мегаподменю
- Изображения: Скругление и лёгкое увеличение картинок при наведении, Круглые миниатюры у пунктов с картинкой слева
- Вкладки: Акцентная полоска у активной вкладки
- Поиск, корзина, бейджи: Скруглённое поле поиска, Ширина мини-корзины, Пульсирующий бейдж
- Липкое меню: Полупрозрачная закреплённая панель с размытием
- Мобильное меню: Крупнее пункты в мобильном меню, Ширина выезжающей панели, Цвет и толщина линий «бургера», Кнопка во всю ширину в подвале мобильной панели
- Доступность и совместимость: Заметная рамка фокуса с клавиатуры, Подменю прячется под элементами темы, Скрыть меню на отдельной странице
Верхний уровень
Анимированное подчёркивание при наведении
В настройках можно поменять цвет и фон пункта при наведении, но не нарисовать линию, которая «вырастает» из центра.
/* Линия под пунктом верхнего уровня, растёт от центра при наведении и при открытом подменю */
.eldermenu .eldermenu-item-level-0 > .eldermenu-target {
position: relative;
}
.eldermenu .eldermenu-item-level-0 > .eldermenu-target::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 8px;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: scaleX(0);
transition: transform .25s ease;
}
.eldermenu .eldermenu-item-level-0:hover > .eldermenu-target::after,
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-target::after {
transform: scaleX(1);
}Если у пунктов есть стрелка подменю, увеличьте right до 30px, чтобы линия не заходила под неё.
Полоска у текущего раздела другого цвета
Скины отмечают текущий раздел полоской снизу. Цвет шрифта и фона текущего пункта задаются в «Настройках стиля», а цвет и толщина самой полоски — нет.
/* Полоска снизу у текущего пункта: цвет и толщина */
.eldermenu.eldermenu-horizontal .eldermenu-item-level-0.eldermenu-current-menu-item > .eldermenu-target,
.eldermenu.eldermenu-horizontal .eldermenu-item-level-0.eldermenu-current-menu-parent > .eldermenu-target,
.eldermenu.eldermenu-horizontal .eldermenu-item-level-0.eldermenu-current-menu-ancestor > .eldermenu-target {
box-shadow: inset 0 -4px 0 #f59e0b;
}Чтобы полоска была сверху, замените -4px на 4px. Чтобы убрать её совсем — box-shadow: none.
Пункт-кнопка (например, «Заказать звонок»)
Отдельный пункт можно раскрасить на панели «Настроить стиль», но скруглённую кнопку с отступами от краёв панели так не сделать.
/* 1. В «Внешний вид → Меню» откройте «Настройки экрана» и включите поле «CSS-классы».
2. Впишите пункту класс menu-cta.
3. Добавьте этот CSS: */
.eldermenu .eldermenu-item-level-0.menu-cta > .eldermenu-target {
margin: 10px 0 10px 8px;
padding: 10px 20px;
border-radius: 999px;
background: #f59e0b;
color: #111827;
font-weight: 700;
line-height: 1.2;
}
.eldermenu .eldermenu-item-level-0.menu-cta > .eldermenu-target:hover {
background: #fbbf24;
color: #111827;
}Классы из поля «CSS-классы» WordPress попадают на элемент li пункта, поэтому их можно использовать в любом рецепте.
Крупнее иконки у пунктов верхнего уровня
Ширину места под иконку задаёт «Иконки → Ширина иконки», а размер самого значка отдельно не настраивается.
/* Иконки пунктов верхнего уровня на 25% крупнее текста */
.eldermenu .eldermenu-item-level-0 > .eldermenu-target > .eldermenu-icon {
font-size: 1.25em;
}Мелкий подзаголовок под пунктом верхнего уровня
Описания у пунктов верхнего уровня включаются в «Описания → Описания верхнего уровня», а их размер в «Настройках стиля» общий для всех уровней.
/* Описание пункта верхнего уровня — мелко и полупрозрачно */
.eldermenu .eldermenu-item-level-0 > .eldermenu-target > .eldermenu-target-text > .eldermenu-target-description,
.eldermenu .eldermenu-item-level-0 > .eldermenu-target .eldermenu-target-description {
font-size: 11px;
opacity: .7;
text-transform: none;
letter-spacing: 0;
}Стрелки подменю
Стрелка поворачивается при открытии
Цвет стрелки меняется в «Настройках стиля», поворот при открытии подменю — нет.
/* Стрелка верхнего уровня переворачивается, пока подменю открыто */
.eldermenu .eldermenu-item-level-0 > .eldermenu-target > .eldermenu-sub-indicator {
transition: rotate .2s ease;
}
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-target > .eldermenu-sub-indicator {
rotate: 180deg;
}Используется отдельное свойство rotate, а не transform: плагин уже выравнивает стрелку через transform, и его нельзя перезаписывать.
«Плюс» вместо стрелки
Иконку стрелки нельзя выбрать в настройках: она берётся из Font Awesome или встроенного SVG.
/* Прячем стандартный значок и рисуем «+», который превращается в «−» */
.eldermenu .eldermenu-item-level-0 > .eldermenu-target > .eldermenu-sub-indicator > * {
display: none !important;
}
.eldermenu .eldermenu-item-level-0 > .eldermenu-target > .eldermenu-sub-indicator::before {
content: "+";
font-family: inherit;
font-weight: 400;
font-size: 18px;
line-height: 1;
}
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-target > .eldermenu-sub-indicator::before {
content: "\2212";
}
Подменю
Скруглённые углы и своя тень подменю
Прозрачность тени подменю настраивается, а радиус углов и форма тени — нет.
/* Мегаподменю и выпадающие подменю: скругление и мягкая тень */
.eldermenu.eldermenu-horizontal .eldermenu-item-level-0 > .eldermenu-submenu-drop {
border-radius: 0 0 18px 18px;
box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .45);
}
.eldermenu .eldermenu-submenu .eldermenu-submenu-drop {
border-radius: 12px;
}
Пункты подменю появляются по очереди
Переход подменю (сдвиг, затухание, раскрытие) действует на подменю целиком. Каскадное появление колонок делается анимацией.
/* Колонки мегаподменю въезжают снизу одна за другой */
@keyframes em-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-submenu-type-mega > .eldermenu-item {
animation: em-rise .35s ease both;
}
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-submenu-type-mega > .eldermenu-item:nth-child(2) { animation-delay: .05s; }
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-submenu-type-mega > .eldermenu-item:nth-child(3) { animation-delay: .10s; }
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-submenu-type-mega > .eldermenu-item:nth-child(4) { animation-delay: .15s; }
.eldermenu .eldermenu-item-level-0.eldermenu-active > .eldermenu-submenu-type-mega > .eldermenu-item:nth-child(5) { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
.eldermenu .eldermenu-submenu-type-mega > .eldermenu-item { animation: none !important; }
}Блок prefers-reduced-motion отключает анимацию у посетителей, которые попросили систему уменьшить движение.
Затемнение страницы, пока открыто мегаподменю
Затемнение фона есть только у мобильной панели. На компьютере его можно нарисовать огромной тенью самого подменю — без правок темы и без борьбы с z-index.
/* Открытое мегаподменю отбрасывает «тень» на всю страницу ниже панели меню */
.eldermenu.eldermenu-horizontal .eldermenu-item-level-0.eldermenu-active > .eldermenu-submenu-type-mega {
box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5), 0 0 0 100vmax rgba(15, 23, 42, .45);
clip-path: inset(0 -100vmax -100vmax -100vmax);
}Вторая тень с растяжением 100vmax закрывает всё вокруг подменю, а clip-path обрезает её выше верхнего края подменю — панель меню остаётся светлой. Тень не перехватывает мышь: подменю закрывается как обычно, когда курсор уходит.
Одинаковая ширина всех выпадающих подменю
Ширина подменю задаётся у каждого пункта на панели «Подменю». Для всех выпадающих списков сразу удобнее одно правило.
/* Все выпадающие (Flyout) подменю не уже 240px */
.eldermenu .eldermenu-submenu.eldermenu-submenu-type-flyout {
min-width: 240px;
}Мегаподменю на всю ширину экрана, содержимое по центру
Подменю привязывается к панели меню или к внутренней панели. Если тема держит меню в узком контейнере, а фон подменю нужен от края до края экрана, помогает псевдоэлемент.
/* Фон мегаподменю растягивается на всю ширину окна, колонки остаются на своих местах */
.eldermenu.eldermenu-horizontal .eldermenu-item-level-0 > .eldermenu-submenu-type-mega::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: inherit;
box-shadow: inherit;
z-index: -1;
}Работает, когда подменю привязано к панели меню («Позиция и макет → Привязать подменю к → Панель меню»). Сама прокрутка страницы не появится: псевдоэлемент не влияет на ширину документа, если у body стоит overflow-x: hidden (так у большинства тем); иначе добавьте это правило в CSS темы.
Колонки и заголовки
Заголовки колонок капителью с разрядкой
Регистр заголовка меняется в «Настройках стиля», межбуквенный интервал — нет.
/* Заголовки колонок: мелкие прописные буквы с разрядкой */
.eldermenu .eldermenu-submenu .eldermenu-item-header > .eldermenu-target {
font-size: 12px;
letter-spacing: .09em;
text-transform: uppercase;
}
Линия под заголовком колонки толще и акцентного цвета
Цвет линии задаётся («Цвет границы заголовка колонки»), толщина — нет.
/* Линия под заголовками колонок со списком ниже */
.eldermenu .eldermenu-submenu .eldermenu-item-header.eldermenu-has-submenu-stack > .eldermenu-target {
border-bottom: 2px solid #6366f1;
}Вертикальные линии между колонками во всех мегаподменю
У каждого пункта есть «Разделители колонок подменю», но для всех подменю сразу проще задать правило.
/* Тонкая линия слева у каждой колонки, кроме первой */
.eldermenu .eldermenu-item-level-0 > .eldermenu-submenu-type-mega > .eldermenu-column + .eldermenu-column {
border-left: 1px solid rgba(148, 163, 184, .25);
}Изображения
Скругление и лёгкое увеличение картинок при наведении
Размер и положение картинки настраиваются, её форма и эффекты — нет.
/* Картинки пунктов: скругление и плавное увеличение при наведении */
.eldermenu .eldermenu-submenu .eldermenu-image {
border-radius: 12px;
transition: transform .3s ease, filter .3s ease;
}
.eldermenu .eldermenu-submenu .eldermenu-target:hover .eldermenu-image {
transform: scale(1.04);
filter: brightness(1.08);
}
Круглые миниатюры у пунктов с картинкой слева
Подходит для аватаров, брендов, категорий товаров.
/* Картинки в макете «Изображение слева» — круглые */
.eldermenu .eldermenu-item-layout-image_left > .eldermenu-image {
border-radius: 50%;
object-fit: cover;
}
Вкладки
Акцентная полоска у активной вкладки
Цвета вкладок настраиваются в «Настройках стиля», маркер активной вкладки — нет.
/* Активная вкладка (макет «Слева») отмечена полоской слева */
.eldermenu .eldermenu-tabs-group > .eldermenu-tab.eldermenu-active > .eldermenu-target {
box-shadow: inset 3px 0 0 #a5b4fc;
}
/* Для вкладок сверху — полоска снизу */
.eldermenu .eldermenu-tab-layout-top > .eldermenu-tabs-group > .eldermenu-tab.eldermenu-active > .eldermenu-target {
box-shadow: inset 0 -3px 0 #a5b4fc;
}
Поиск, корзина, бейджи
Скруглённое поле поиска
Цвета строки поиска настраиваются, форма — нет.
/* Поле поиска-«таблетка» */
.eldermenu .eldermenu-search .eldermenu-search-input {
border-radius: 999px;
padding-left: 18px;
}
.eldermenu .eldermenu-search .eldermenu-search-submit {
border-radius: 0 999px 999px 0;
}Ширина мини-корзины
Мини-корзина — подменю пункта «Корзина». Его ширина задаётся полем «Ширина подменю»; если нужно одно правило для всех корзин на сайте — CSS.
/* Мини-корзина шире */
.eldermenu .eldermenu-submenu-drop.eldermenu-submenu-cart {
width: 380px;
}Пульсирующий бейдж
Цвет и форма бейджа задаются в настройках, анимация — нет.
/* Бейдж пункта мягко пульсирует */
@keyframes em-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.eldermenu .eldermenu-badge {
animation: em-pulse 2s ease-in-out infinite;
}Липкое меню
Полупрозрачная закреплённая панель с размытием
Для закреплённой панели настраиваются фон, тень и компактность. «Стекло» с размытием того, что под ней, делается через backdrop-filter.
/* Пока меню закреплено: полупрозрачный фон и размытие содержимого под ним */
.eldermenu-sticky-stuck > .eldermenu-sticky-inner {
background: rgba(17, 24, 39, .72) !important;
-webkit-backdrop-filter: saturate(160%) blur(12px);
backdrop-filter: saturate(160%) blur(12px);
}
/* сама панель меню внутри — прозрачная, иначе фоны сложатся */
.eldermenu-sticky-stuck > .eldermenu-sticky-inner .eldermenu.eldermenu-horizontal {
background: transparent !important;
border-bottom-color: transparent;
}Классы eldermenu-sticky-stuck и eldermenu-sticky-hidden добавляются обёртке липкого меню, пока оно закреплено и пока спрятано при прокрутке вниз.
Мобильное меню
Крупнее пункты в мобильном меню
Размер шрифта в «Настройках стиля» один для всех экранов. В поле «Пользовательские правки CSS — мобильные» правило действует только ниже контрольной точки.
/* Только в мобильном меню: пункты верхнего уровня крупнее */
nav.eldermenu.eldermenu-responsive.eldermenu-responsive-default .eldermenu-item-level-0 > .eldermenu-target {
font-size: 19px;
}
/* и описания пунктов скрыты */
.eldermenu .eldermenu-target-description {
display: none;
}Длинный селектор нужен, чтобы перебить мобильные правила плагина — у них тоже пять классов.
Ширина выезжающей панели
По умолчанию выезжающая панель занимает 88% экрана, но не больше 380px.
/* Выезжающая панель (справа или слева): 320px, не шире 85% экрана */
nav.eldermenu.eldermenu-mobile-offcanvas.eldermenu-responsive-default {
width: 320px;
max-width: 85vw;
}
Цвет и толщина линий «бургера»
«Бургер» рисуется цветом текста кнопки. Если нужен отдельный цвет линий или они должны быть толще — CSS.
/* Линии бургера: акцентный цвет и толщина 3px */
.eldermenu-responsive-toggle .eldermenu-burger-inner,
.eldermenu-responsive-toggle .eldermenu-burger-box::before,
.eldermenu-responsive-toggle .eldermenu-burger-box::after {
background: #f59e0b;
height: 3px;
}
Кнопка во всю ширину в подвале мобильной панели
В подвал панели можно вписать HTML («Адаптивность и мобильные → Содержимое подвала»). Оформление этого HTML — через свой класс.
/* В поле «Содержимое подвала» впишите: <a class="em-mobile-cta" href="tel:+70000000000">Позвонить</a> */
.eldermenu-mobile-footer .em-mobile-cta {
display: block;
margin: 16px;
padding: 14px;
border-radius: 12px;
background: #4f46e5;
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
}Доступность и совместимость
Заметная рамка фокуса с клавиатуры
Функции доступности подсвечивают пункт в фокусе. Рамку можно сделать заметнее, не трогая вид при клике мышью.
/* Рамка только при навигации с клавиатуры (Tab) */
.eldermenu .eldermenu-target:focus-visible,
.eldermenu-responsive-toggle:focus-visible {
outline: 2px solid #f59e0b;
outline-offset: -2px;
}Подменю прячется под элементами темы
Слайдеры и шапки некоторых тем имеют высокий z-index и перекрывают подменю.
/* Поднять меню над соседними блоками темы */
.eldermenu {
z-index: 9999;
}
.eldermenu .eldermenu-submenu-drop {
z-index: 9999;
}Если не помогает, значит контейнер темы вокруг меню сам создаёт контекст наложения (position + z-index, transform, overflow: hidden). Тогда z-index нужно поднять этому контейнеру, а overflow: hidden — убрать.
Скрыть меню на отдельной странице
Например, на лендинге без навигации. WordPress добавляет к body класс с ID страницы.
/* Страница с ID 42 (класс page-id-42 у body) */
body.page-id-42 .eldermenu,
body.page-id-42 .eldermenu-responsive-toggle {
display: none !important;
}