В теме  Divi есть возможность создавать мегаменю.   Мегаменю — это раскрываемое двухмерное меню в несколько колонок с широким выбором пунктов.

В статье приведен  способ как подключить и настроить мегаменю Divi .

1. Как подключить мегаменю Divi

Для примера, подготовим меню для сайта 

Стандартно для Divi это меню будет выглядеть так: 

Для подключение мегаменю Divi в админпанели WordPress  добавьте текст mega-menu в поле "Классы CSS"  в настройках того пункта меню, подпункты которого хотите отобразить в виде мегаменю. 

Теперь все подпункты пункта меню "Рубрики" будут отображаться в виде мегаменю.  Добавлять текст в подпункты не надо. 

Если поле "Классы CSS" не отображается при настройках пунктов меню - включите его отображение в настройках экрана вверху страницы админпанели WordPress. Для этого нажмите вкладку "Настройка экрана" и поставте  галочку в поле   "Классы CSS".

2. Как изменить количество колонок мегаменю Divi

По умолчанию в теме Divi мегаменю имеет 4 колонки. Однако количество колонок иможно изменить с помошью CSS. Добавьте приведенный ниже код в файл style.css дочерной темы Divi либо в настройках темы Divi в раздел "Пользователский CSS" админпанели WordPress.

5 колонок мегаменю

#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(6n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 20%;
margin: 0;
}

Результат:

6 колонок мегаменю

#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(7n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 16%;
margin: 0;
}

7 колонок мегаменю

#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(8n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 14%;
margin: 0;
}

8 колонок мегаменю

#top-menu li.mega-menu > ul > li:nth-of-type(5n) {
clear: none;
}
#top-menu li.mega-menu > ul > li:nth-of-type(9n) {
clear: none;
}
#top-menu li.mega-menu > ul > li {
width: 12%;
margin: 0;
}

3. Как добавить изображение в меню

В меню, подготовленное выше в пункте 1, добавим в подзаголовки изображения:

Чтобы добавить изображения в название разделов мегаменю надо сделать следующее:

3.1. Подготовьте и загрузите изображения

Подготовьте нужное количество изображений в редакторе изображений с одинаковыми размерами: шириной 500 пикселей и высотой 300 пикселей. Добавьте эти изображения в медиабиблиотеку сайта:

3.2. Вставьте изображения в пункты меню

Для этого перед наименованием пункта меню в поле "Текст ссылки" добавьте код

<img src="url изображения" alt="Альтернативний текст" width="100%">

где "url изображения" - адрес изображения из медиабиблиотеки, а "Альтернативный текст" - замещающий изображение текст, если изображение по каким-то причинам не будет выведено. Заполнение тега "alt" важно для  SEO.

Адрес изображения в медиабиблиотекие можно скопировать, кликнув на само изображение в библиотеке  и войдя в режим "Изменить медиафайл"  ( пункт админпанели WordPress: Медиафайлы -> Изменить )

3.3. Настройка отображения меню

Для настройки отображения пункта меню в поле "Классы CSS" меню добавьте текст mega-link тем самым добавляя пользовательский клсасс CSS к пункту меню.

В дальнейшем с помощью стилей CSS вы можете настраивать отображение пунктов меню с указанным классом.

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

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 
}

Добавлять код надо либо в файл style.css дочерной темы, либо в настройках темы Divi в окно "Пользователский CSS" в админпанели  WordPress:

4. Как улучшить удобство мегаменю для пользователя

Следует отметить один недостаток классического мегаменю Divi.
Посмотрите на рисунок ниже. Если вы захотите переместить мышь по траектории, показанной красной стрелкой, - то вы не достигнете поставленной цели и не доберетесь к пункту меню "Рубрика 1".  Ибо если указатель мыши покинет пределы пункта меню "Рубрики" (ограничено серыым фоном) - то мегаменю исчезнет.  

По сути чтобы добраться до пункта меню "Рубрика 1" вам надо двигать указатель мыши по следующей траектории:

Чтобы убрать такой недостаток мегаменю достаточно добавить на сайт несколько строк кода CSS

/* Сделать Мега-Меню не исчезающим сразу */
@media  (min-width: 981px) {
  .et-dropdown-removing > ul {    
    display: block!important;
  }
  .et-dropdown-removing > ul ul {    
      display: block!important;
    }
  #top-menu li.mega-menu:hover li ul {
    visibility: visible;
    opacity:1;
  }
  #top-menu li.mega-menu li ul {
    display: block;
    visibility: hidden;
    opacity:0;
  }
  .nav li ul {
      transition: all 0.5s 0.2s ease-out !important;
  }
}

Добавлять код надо либо в файл style.css дочерной темы, либо в настройках темы Divi в окно "Пользователский CSS" в админпанели  WordPress

5. Как сделать мегаменю компактным

Иногда хорошо смотриться и удобнее для пользования компактное мегаменю:

Приведенный ниже код CSS делает  такое меню.

/* Сделать Мега-Меню компактным */
 
/* standard drop down */
    .nav li ul {
        width: 160px;
        padding: 0px 0 3px;}
    .nav li li {
        line-height: 14px;}
    .nav li li a {
        font-size: 13px;}
    #top-menu li li {
        margin: 0;
        padding: 0px 5px;}
    #top-menu li li a {
        width: 150px;}
 
/* mega menu drop down */
    #top-menu li.mega-menu > ul {
        width: 600px; /*ширина мегаменю*/
        padding: 5px 5px;}
 
    #top-menu li.mega-menu > ul > li > a, #top-menu li > ul > li > a {
        padding: 7px 5px 7px;}
 
/* default or centered style header mega menu alignment */
    .et_header_style_left #top-menu li.mega-menu > ul {
        left: auto!important;
        right: 0;}
 
    .et_header_style_centered #top-menu li.mega-menu > ul {
        left: auto!important;}
 
    .et_header_style_centered #top-menu > li:last-child.mega-menu > ul {
        left: auto!important;
        right: 0!important;}
 
 
/* first row of titles */
    #top-menu li.mega-menu > ul > li > a:first-child {
        border-bottom: 1px solid #75adde;
        font-weight: bold;}
 
/* sub-menu items - 2nd level */
    .nav li li li a {
        font-size: 13px;}
 
    #top-menu li li a {
        padding: 0px 5px;
        font-weight: 300;}
 
/* drop down menu items on hover */
    .nav ul li a:hover {
        opacity: 1;
        background-color: #88bae6;}

Добавлять код надо либо в файл style.css дочерной темы, либо в настройках темы Divi в окно "Пользователский CSS" в админпанели  WordPress

Заключение

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

Удачи.
Александр Коваль