Как создать подменю

Как в WordPress сделать меню с подменю

Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» — «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.

Структура меню

Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:

Главная
Отзывы клиентов
Услуги
- Подбор оборудования
- Монтаж и прокладка ЛВС
- Виртуализация
- IP-телефония
- Видеонаблюдение
- Мониторинг
Уровень вложенности меню может быть любым, но на мой взгляд, сайты, у которых больше двух уровней вложенности очень неудобны в использовании. Пока ведёшь к подпункту, предыдущий пункт закрывается или постоянно скачет перед глазами. Это по большей части проблема программиста или автора темы, но факт остаётся фактом: самый частый вариант меню на сайтах — двухуровневый.

Некоторые сходятся в мысли, что перед тем, как создать страницы, следует создать меню из ссылок-пустышек, которые никуда не ведут и попросту не работают на сайте. Это нужно для того, чтобы заранее определиться с нужными пунктами и затем создавать структуру страниц по уже готовому варианту.

В принципе, это неплохо и можем пойти по такому же пути: сначала создадим структуру, посмотрим, всё ли нормально у нас и затем уже будем создавать страницы (создать страницы вы сможете и самостоятельно, я верю в вас!).

Заходим в раздел «Внешний вид» — «Меню»:

Создаём новый набор меню или используем уже существующий.

В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции Как добавить ссылку в меню):

Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки — #, а в поле «Текст ссылки» вставляем нужную нам фразу.

Читайте также: Как вывести меню в сайдбаре WordPress

После нажатия на кнопку «Добавить в меню» в правой части экрана появится созданный нами пункт:

Добавляем остальные пункты в меню

Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:

Давайте сохраним наш промежуточный результат и зайдём на сайт, чтобы посмотреть, как будет выглядеть первый вариант созданного только что меню:

Пока неплохо выглядит, я думаю можно продолжить дальше. Кстати, если вы не видите созданное только что меню, тогда вам следует обратить внимание на раздел «Области темы» в интерфейсе управления меню и выбрать там нужную вам опцию. У меня это выглядит так:

Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.

Результат должен получиться следующий:

Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с рубриками, но они сделали это удобнее, взгляните:

Вам достаточно захватить кнопкой мыши нужный вам пункт и просто перетянуть его под основной пункт меню. Что в итоге я сделал: перетащил «Подбор оборудования» под «Услуги», визуально пункт подменю получил отступ с левой стороны.

По аналогии сделаем и другие пункты:

Создание меню завершается нажатием на кнопку сохранения. После этого мы можем спокойно идти на главную страницу сайта и проверять промежуточный результат:

Что дальше?

Дальше всё просто:
1. Создаёте нужные вам страницы с подстраницами для Услуг
2. Удаляете по очереди каждый пункт меню-заглушку
3. Вставляете ссылку на созданную страницу через раздел «Страницы» интерфейса управления меню
Читайте также: Обзорный тур по WordPress

Если какие-то из пунктов вам остались непонятными — напишите об этом в комментарии, я подготовлю более развёрнутую инструкцию на этот счёт, но, как мне кажется, этого материала будет достаточно, чтобы создать развёрнутое меню в WordPress. Успехов! ��

Видео

Автор

Александр Кадыров

Занимаюсь разработкой сайтов на WordPress около 10 лет, с тех же пор стал вести блог о WordPress. В итоге это всё вылилось в этот курс, где вы сейчас находитесь. В свободное время программирую на Ruby, PHP и Golang, увлекаюсь администрированием серверов и автоматизацией своей деятельности. Посмотреть все записи автора Александр Кадыров

Как создать подменю

Нажмите на блок «Главная», в выпадающем меню выберите «Редактировать»:

Поместите один заголовок страницы на другой. ( на скриншоте страница «Контакты» находится в подменю страницы «О нас»).

Нажмите кнопку «Применить».

Для того, тобы посмотреть, как выглядит выпадающее меню, нажмите на кнопку «Просмотр».

При наведении курсора на страницу «О нас» в подменю отображается страница «Контакты».

Закройте предпросмотр, нажмите на кнопку «Крест».

Если вы удалите модуль меню со всех страниц, пропадут страницы, которые вы создали в модуле.

Как сделать меню навигации с подменю

Создание меню навигации с подменю является важным элементом при разработке веб-сайта. В этой статье будет рассмотрен процесс создания такого меню с использованием HTML, CSS и немного JavaScript.

Структура HTML
�� Здесь мы создали основное меню с четырьмя элементами, два из которых имеют подменю.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Оформление CSS

Теперь применим стили CSS для оформления нашего меню:

nav < background-color: #333; >nav ul < list-style-type: none; margin: 0; padding: 0; >nav li < float: left; >nav li a < display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; >nav li a:hover < background-color: #111; >nav ul ul < display: none; position: absolute; min-width: 160px; background-color: #333; >nav ul ul li < float: none; >nav ul ul li a < padding: 12px 16px; >nav ul ul li a:hover

�� В этом примере мы задаем основные стили для нашего меню, включая цвет фона, стили текста и наведения мыши.

Добавление JavaScript

Теперь добавим немного JavaScript кода для работы с подменю:
```
document.addEventListener("DOMContentLoaded", function() < var dropdowns = document.querySelectorAll("nav ul li"); for (var i = 0; i < dropdowns.length; i++) < dropdowns[i].addEventListener("mouseenter", function() < var submenu = this.querySelector("ul"); if (submenu) < submenu.style.display = "block"; >>); dropdowns[i].addEventListener("mouseleave", function() < var submenu = this.querySelector("ul"); if (submenu) < submenu.style.display = "none"; >>); > >);
```
✨ В данном примере, когда мы наводим курсор на элемент меню с подменю, оно становится видимым, а при уходе курсора — снова скрывается.

Теперь у нас есть функциональное меню навигации с подменю. Вам может потребоваться дополнительно настроить стили CSS, чтобы они соответствовали вашему дизайну, но основной функционал уже реализован. Удачи в разработке! ��

Как создать подменю в Bitrix?

Вопрос кажется банальным, но в моем случае не все так просто. Или я просто мало информирован об этой системе.
Насколько я знаю, в битриксе меню формируется согласно структуре каталогов в файловой системе, создаешь подраздел на конкретной странице, ставишь галочку создать меню, и он появляется в выпадающем списке.
Но вот что на сайте у меня:
Так выглядит выпадающее меню:

А так выглядит структура каталогов:

Т.е. меню формируется совсем не из структуры каталогов, а как он тогда формируется?
Мне нужно сделать банальную вещь, создать подпункт меню О компании и назвать его сертификаты, но у меня не получается это сделать. В структуре вообще и «услуги» и «акции» и «оплата» находятся внутри «о компании», но меню то формируется как то иначе.
- Вопрос задан более трёх лет назад
- 15539 просмотров
Комментировать
Решения вопроса 1

Насколько я знаю, в битриксе меню формируется согласно структуре каталогов в файловой системе, создаешь подраздел на конкретной странице, ставишь галочку создать меню, и он появляется в выпадающем списке.

но можно и самому добавить, руками.

В документации есть подробное описание и примеры по работе с меню.

В простом случае меню можно править через админку (или файл нужного типа меню .*.menu.php в корне сайта).
В более сложном (если используется «многоуровневое» меню) — через штатные средства или файл .*.menu.php в корне сайта и файлы .*.menu.php в подпапках.

Ответ написан более трёх лет назад
Нравится 1 2 комментария

Максим Шадрин @makc9I Автор вопроса

Спасибо большое, там в основном меню отсутствовал последний слеш, поэтому все манипуляции с подменю ни к чему не приводили.

Чтобы сделать меню в Битрик нужно читать документацию — это писец извращение.
В WordPress меню просто кнопочками делается .

Ответы на вопрос 3
битриксоид
в битрикс можно создать подменю, не совпадающее со структурой разделов, добавив
```
$aMenuLinks = Array( Array( "пункт 1", "/link1/", Array("/link1/"), Array( "FROM_IBLOCK" => 1, "IS_PARENT" => 1, "DEPTH_LEVEL" => 1 ) ), Array( "подпункт 1", "/sublink1/", Array("/sublink1/"), Array( "FROM_IBLOCK" => 1, "IS_PARENT" => 0, "DEPTH_LEVEL" => 2 ) ), );
```
где подпункт должен следовать за родит. пунктом и иметь соответ-щий уровень вложенности

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

Сергей Горячев @SergeGoryachev

В битриксе меню может формироваться компонентами. То есть у вас может быть папка catalog или news с индексным файлом, в котором прописан комплексный компонент.
А этот компонент берет информацию из инфоблока в котором есть разделы, подразделы и элементы.
Соответственно, можно настроить меню так, что бы разделы/подразделы становились пунктами/подпунктами меню.
И это вообще на структуре папок отражаться не будет. Все будет формироваться динамически.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

вопрос старый, но отвечу, чтобы самому не забыть, когда понадобится ))
```
IncludeComponent("bitrix:menu", "horizontal_multilevel", Array(
```
```
Array( "Пункт, из которого будет выпадать подменю", "/parent1/", Array(), Array( "FROM_IBLOCK" => 0, "IS_PARENT" => 1, "DEPTH_LEVEL" => 1 ), "" ), /* подменю */ Array( "Первый пункт подменю", "/submenu1/", Array("/submenu1/"), Array( "FROM_IBLOCK" => 0, "IS_PARENT" => 0, "DEPTH_LEVEL" => 2 ), "" ), Array( "Второй пункт подменю", "/submenu2/", Array("/submenu2/"), Array( "FROM_IBLOCK" => 0, "IS_PARENT" => 0, "DEPTH_LEVEL" => 2 ), "" ), /* конец подменю */
```
Похожие публикации: