Создать акаунт
Всё для вебмастера » Вопросы и ответы » CMS » WordPress » Как сделать выпадающее меню с колонками в WordPress?

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

03 авг 2022, 00:31
WordPress
221
0
Стоит задача сделать такое меню:
62de6a17c11cb208381012.png

Пробовал ставить разные плагины и писать свой walker для wp_nav_menu, но так и не удалось достичь такого разделения на колонки(

Ниже код вёрстки меню:
<div class="header-b__menu">                <div class="header-b__item header-b__item_hasDrop">                  <a href="https://qna.habr.com#" class="header-b__links"><span>База недвижимости</span></a>                  <div class="header-b__toggle header-b__toggle_columns">                    <div class="header-b__toggle-inner">                      <div class="header-b__toggle-grid">                        <div class="header-b__toggle-column">                          <div class="header-b__toggle-label">Сделка</div>                          <div class="header-b__toggle-menu">                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Продажа</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Аренда</a>                          </div>                        </div>                        <div class="header-b__toggle-column">                          <div class="header-b__toggle-label">Предложения</div>                          <div class="header-b__toggle-menu">                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Новостройки</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Вторичное</a>                          </div>                        </div>                        <div class="header-b__toggle-column">                          <div class="header-b__toggle-label">Тип</div>                          <div class="header-b__toggle-menu">                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Городская</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Загородная</a>                          </div>                        </div>                        <div class="header-b__toggle-column">                          <div class="header-b__toggle-label">Количество комнат</div>                          <div class="header-b__toggle-menu">                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Студии</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">1-комнатные</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">2-комнатные</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">3-комнатные</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Многокомнатные (4+)</a>                          </div>                        </div>                        <div class="header-b__toggle-column">                          <div class="header-b__toggle-label">Районы Москвы</div>                          <div class="header-b__toggle-menu">                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ЮВАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ЮЗАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ЮАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ЦАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">СВАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">СЗАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ЗАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ВАО</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">ЗАО</a>                          </div>                        </div>                      </div>                    </div>                  </div>                </div>                <div class="header-b__item header-b__item_hasDrop">                  <a href="https://qna.habr.com#" class="header-b__links"><span>Услуги</span></a>                  <div class="header-b__toggle">                    <div class="header-b__toggle-inner">                      <div class="header-b__toggle-grid">                        <div class="header-b__toggle-column">                          <div class="header-b__toggle-menu">                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Купить</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Снять</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Оценить</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Ипотека</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Подбор риэлтора</a>                            <a href="https://qna.habr.com#" class="header-b__toggle-links">Срочный выкуп</a>                          </div>                        </div>                      </div>                    </div>                  </div>                </div>                <div class="header-b__item"><a href="https://qna.habr.com#" class="header-b__links"><span>О компании</span></a>                </div>                <div class="header-b__item"><a href="https://qna.habr.com#" class="header-b__links"><span>Новости</span></a>                </div>                <div class="header-b__item"><a href="https://qna.habr.com#" class="header-b__links"><span>Работа в АРТ</span></a>                </div>                <div class="header-b__item"><a href="https://qna.habr.com#" class="header-b__links"><span>Контакты</span></a>                </div>                <div class="header-b__line"></div>              </div>

Внимание! Как сделать выпадающее меню с колонками в WordPress? предоставлен пользователями сайта исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Смотрите также:

Комментарии к Как сделать выпадающее меню с колонками в WordPress?
Добавить Комментарий
В комментариях запрещаются спам, а также реклама любых товаров и услуг, иных ресурсов.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.