Как мы чинили мобильное меню на WordPress

От: Master F1

Проблема возникала при использовании темы Louis. На телефоне в горизонтальном положении меню само раскрывалось и перекрывало текст. В вертикальном — работало идеально (бургер, меню скрыто). Нужно было заставить меню вести себя одинаково в обоих положениях.

Карта месторождений

1. Главный штаб — Настройки меню

Путь: Админка — Внешний вид — Меню

Здесь создаются пункты, иерархия, назначается область primary. Однако поведение меню (как оно открывается/закрывается) тут не настраивается

2. Полигон для испытаний — Дополнительный CSS

Путь: Админка — Внешний вид — Настроить — Дополнительные стили

Это самое безопасное место для экспериментов. Код применяется сразу в предпросмотре. Если что-то сломалось — просто удаляем код

3. Инструмент разведчика — Инспектор браузера

На сайте жмём F12 (или правая кнопка — «Просмотреть код»). Нажимаем иконку «Toggle device toolbar» (или Ctrl+Shift+M). В верхней панели выбираем устройство, например, iPhone SE или Pixel 5. Не нажимаем кнопку поворота. Вместо этого вручную меняем размеры: просто тянем за край окна эмуляции, чтобы ширина стала больше высоты. Как только ширина превысит высоту — сработает @media (orientation: landscape) и применятся новые стили.

Вкладки:

Elements (Элементы) — смотрим HTML структуру
Console (Консоль) — выполняем команды

Как мы нашли виновников (метод расследования)

Шаг 1. Ищем главный контейнер меню

<nav>
    <div id="cssmenu">  <!-- ВОТ ОН, ГЛАВНЫЙ БЛОК -->
        <div id="menu-button">Menu</div>  <!-- Кнопка -->
        <ul>...пункты...</ul>  <!-- Само меню -->
    </div>
</nav>

<nav>

<ul>...пункты...</ul>

</div>

</nav>

Ключевые классы: #cssmenu, #menu-button

Шаг 2. Следим за кнопкой

Нажали на бургер → смотрим, что меняется:

<!-- Было: -->
<div id="menu-button">Menu</div>

1 2	<!-- Было: --> <div id="menu-button">Menu</div>

<!-- Стало (меню открыто): -->
<div id="menu-button" class="menu-opened">Menu</div>

1 2	<!-- Стало (меню открыто): --> <div id="menu-button" class="menu-opened">Menu</div>

Класс-переключатель: menu-opened

Шаг 3. Смотрим, как открываются подменю

Внутри пунктов, например, типа «Железо» есть:

<span class="submenu-button"></span>  <!-- Плюсик -->
<ul class="sub-menu" style="display: none;">  <!-- Скрытое подменю -->

<!-- При клике становится: -->
<span class="submenu-button submenu-opened"></span>
<ul class="sub-menu open" style="display: block;">

Классы для подменю: submenu-button, submenu-opened, open

Финальный код:

@media (orientation: landscape) and (max-width: 1024px) {
    #cssmenu {
        position: relative !important;
    }
    
    #cssmenu > ul {
        display: none !important;
        position: absolute !important;
        width: 100% !important;
        top: 100% !important;
        left: 0 !important;       
        z-index: 9999 !important;
    }
    
    #menu-button {
        display: block !important;
    }
    
    #menu-button.menu-opened + ul {
        display: block !important;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {

#cssmenu {

position: relative !important;

}

#cssmenu > ul {

display: none !important;

position: absolute !important;

width: 100% !important;

top: 100% !important;

left: 0 !important;

z-index: 9999 !important;

}

#menu-button {

display: block !important;

}

#menu-button.menu-opened + ul {

display: block !important;

}

Объяснение финального кода

@media (orientation: landscape) and (max-width: 1024px) {
    /* Условие: ТОЛЬКО для горизонтального режима на устройствах 
       шириной до 1024px (телефоны и маленькие планшеты) */
    
    /* 1. Заставляем сайт думать, что он в мобильном режиме */
    #cssmenu {
        position: relative !important;
    }
    /* !important — перебиваем любые другие стили темы */
    
    /* 2. Прячем список меню по умолчанию */
    #cssmenu > ul {
        display: none !important;        /* Скрыли */
        position: absolute !important;   /* Выпадающее меню */
        width: 100% !important;          /* На всю ширину */
        top: 100% !important;            /* Сразу под кнопкой */
        left: 0 !important;               /* Прижали к левому краю */
        z-index: 9999 !important;         /* Чтобы было поверх всего */
    }
    
    /* 3. Кнопка меню всегда видна */
    #menu-button {
        display: block !important;
    }
    
    /* 4. Волшебство: когда у кнопки есть класс menu-opened — 
          показываем меню, которое идёт сразу после неё (+ ul) */
    #menu-button.menu-opened + ul {
        display: block !important;
    }
}

@media (orientation: landscape) and (max-width: 1024px) {

/* Условие: ТОЛЬКО для горизонтального режима на устройствах

шириной до 1024px (телефоны и маленькие планшеты) */

/* 1. Заставляем сайт думать, что он в мобильном режиме */

#cssmenu {

position: relative !important;

}

/* !important — перебиваем любые другие стили темы */

/* 2. Прячем список меню по умолчанию */

#cssmenu > ul {

display: none !important; /* Скрыли */

position: absolute !important; /* Выпадающее меню */

width: 100% !important; /* На всю ширину */

top: 100% !important; /* Сразу под кнопкой */

left: 0 !important; /* Прижали к левому краю */

z-index: 9999 !important; /* Чтобы было поверх всего */

}

/* 3. Кнопка меню всегда видна */

#menu-button {

display: block !important;

}

/* 4. Волшебство: когда у кнопки есть класс menu-opened —

показываем меню, которое идёт сразу после неё (+ ul) */

#menu-button.menu-opened + ul {

display: block !important;

}

Пояснения

Строка	Что делает	Почему это важно
@media (orientation: landscape)	Ловит только горизонтальное положение	Не ломает вертикальный режим
#cssmenu > ul	Берёт ТОЛЬКО прямой список меню	Не трогает вложенные подменю внутри
display: none/block	Просто прячет/показывает	Не лезет в логику JavaScript
+ ul	Соседний селектор	Берёт именно тот список, что сразу за кнопкой

Словарик

Термин	Что значит	Где искать
Бургер	Иконка ☰, открывающая меню	#menu-button
Класс	Имя элемента в CSS (начинается с точки)	В инспекторе после class=»…»
ID	Уникальное имя элемента (начинается с #)	В инспекторе после id=»…»
Медиа-запрос	Условие для разных экранов	@media (…)
Псевдоэлемент	Искусственный элемент в CSS	::before, ::after
!important	Приказ выполнить любой ценой	Ставится в конце правила