В теме  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.
В комменатрях ниже оставляйте отзывы, задавайте вопросы,  делитесь опытом.

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