Как организовать вот такой вывод меню в wordpress?

371

05 февраля 2017, 14:00

Добрый день, помогите пожалуйста с лупом меню, хочу сделать вывод меню категорий с подкатегориями, т.е. подкатегории должны выскакивать в модальном окне, структура описана ниже, не знаю как сделать сложновато, там еще data-remodal-target и data-remodal-id должны увеличиваться на один. Подскажите как это сделать.

                   <nav class="main-menu"> 
                      <ul class="row between"> 
                        <li class="main-menu__item"> 
                          <a class="main-menu__link" href="#" data-remodal-target="modal00">Новости</a> 
                          <div class="modal main-menu__modal-wrapper" data-remodal-id="modal00"> 
                            <button class="button_close" data-remodal-action="close"></button> 
                            <div class="modal-wrapper"> 
                              <div class="modal__content"> 
                                <ul class="main-menu__sub-menu animated fadeIn"> 
                                  <li class="main-menu__sub-menu__item"> 
                                    <a class="main-menu__sub-menu__link" href="page1.html">Страница 1</a> 
                                  </li> 
                                  <li class="main-menu__sub-menu__item"> 
                                    <a class="main-menu__sub-menu__link" href="page2.html">Страница 2</a> 
                                  </li> 
                                </ul> 
                              </div> 
                            </div> 
                          </div> 
                        </li> 
                        <li class="main-menu__item"> 
                          <a class="main-menu__link" href="#" data-remodal-target="modal01">Медиа</a> 
                          <div class="modal main-menu__modal-wrapper" data-remodal-id="modal01"> 
                            <button class="button_close" data-remodal-action="close"></button> 
                            <div class="modal-wrapper"> 
                              <div class="modal__content"> 
                                <ul class="main-menu__sub-menu animated fadeIn"> 
                                  <li class="main-menu__sub-menu__item"> 
                                    <a class="main-menu__sub-menu__link" href="page1.html">Страница 1</a> 
                                  </li> 
                                  <li class="main-menu__sub-menu__item"> 
                                    <a class="main-menu__sub-menu__link" href="page2.html">Страница 2</a> 
                                  </li> 
                                </ul> 
                              </div> 
                            </div> 
                          </div> 
                        </li> 
                        <li class="main-menu__item"> 
                          <a class="main-menu__link" href="#" data-remodal-target="modal02">Сервисы</a> 
                          <div class="modal main-menu__modal-wrapper" data-remodal-id="modal02"> 
                            <button class="button_close" data-remodal-action="close"></button> 
                            <div class="modal-wrapper"> 
                              <div class="modal__content"> 
                                <ul class="main-menu__sub-menu animated fadeIn"> 
                                  <li class="main-menu__sub-menu__item"> 
                                    <a class="main-menu__sub-menu__link" href="page1.html">Страница 1</a> 
                                  </li> 
                                  <li class="main-menu__sub-menu__item"> 
                                    <a class="main-menu__sub-menu__link" href="page2.html">Страница 2</a> 
                                  </li> 
                                </ul> 
                              </div> 
                            </div> 
                          </div> 
                        </li> 
                      </ul> 
                    </nav>