Создание мега-меню в Divi

Мега-меню — отличный способ структурировать чрезмерно большое количество пунктов в вашем меню.

Мега-меню позволяет пользователям видеть больше ссылок одновременно без необходимости лишних телодвижений типа прокрутки и наведения курсора на подразделы меню. Фактически Мега-меню это объединение нескольких ваших выпадающих меню в одно с одновременно открытыми пунктами подкатегорий.

Таким образом, вместо обычного выпадающего меню, которое показывает подменю при наведении курсора на основные родительские ссылки на панели навигации, Мега-меню отображает все дополнительные родительские ссылки и подменю в одном общем выпадающем меню.

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

Войдите в свою панель управления WordPress и перейдите в раздел «Внешний вид» > «Меню» .

Вход в раздел Меню

Для примера, создадим меню с четырьмя родительскими ссылками, каждая из которых имеет свои ссылки на подменю. В приведенном ниже примере я добавляю три элемента подменю под каждую из четырех ссылок родительского меню.

Создание структуры Мега-меню

Следующим шагом создайте дополнительную ссылку, которая будет служить вашей ссылкой на Мега-меню. Для примера ниже я называю эту ссылку «Features». Затем перетащите четыре родительские ссылки меню (каждая со своими ссылками в подменю) на ссылку «Features».

Создание структуры Мега-меню

Теперь, чтобы создать Megamenu, вы должны добавить специальный класс CSS к основной ссылке верхнего уровня (т.е. «Features»). Вы можете сделать это, нажав на ссылку «Параметры экрана» вверху страницы и убедившись, что опция класса CSS отмечена.

Включение CSS Class в Параметрах экрана

Наконец, вам нужно добавить класс CSS в ссылку «Features», которую вы только что создали. Нажмите стрелку справа от пункта меню «Features», чтобы переключить дополнительные параметры конфигурации. Найдите текстовое поле с надписью CSS Classes и добавьте класс «mega-menu».

Добавление CSS класса в Мега-меню

Теперь, когда вы перезагрузите свою страницу, вы увидите, что все эти предыдущие меню были помещены в одно общее меню под единственной ссылкой «Features».

Подпишись на нашу рассылку!

Подпишись на нашу рассылку!

Больше советов по созданию сайтов с помощью темы Divi и веб-дизайну в рассылке «Фишки Divi». Подпишитсь и получай только полезную информацию о Divi и WordPress  в свой почтовый ящик.

Вы успешно подписались на рассылку! Проверьте свой почтовый ящик и подтвердите подписку. Если вы не находите письма - проверьте папку "Спам" и вкладку "Промоакции" в Gmail.

Share This