Intereting Posts
Фильтровать по настраиваемому полю для пользовательского типа сообщения. пользовательский контент в качестве пользовательских типов сообщений Лучший способ справиться с отсутствием заголовков в микроблоге Сделать WP_Query более эффективным? Импорт из XML игнорирует сериализованное настраиваемое поле Возвращает все пользовательские сообщения WordPress в определенном многомерном массиве Добавить пользовательский JavaScript, который представляет собой комбинацию CDN / загруженных файлов и легко редактируемого кода? Отключить подтверждение по электронной почте новый регистр bbPress Как использовать обратный вызов элемента управления при создании простого плагина панели Shortcodes на моем сайте перестают работать после обновления темы Сохранение массива значений (URL-адресов файлов) для update_user_meta ()? Удалить родительское имя из permalink Создайте пользовательскую страницу и добавьте ее в навигационное меню по коду Входное значение из метаболизма не найдено в $ _POST после сохранения сообщения Размещение div или img между массивом post с использованием WP Query

Создание пользовательского вертикального меню

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

Я хочу создать пользовательское меню с Walker_Nav_Menu, которое должно выглядеть так:

---------------------------------- Section 1 | Section 2 | Section 3 ---------------------------------- | SubMenu 1 | | SubMenu 2 | | Sub SubMenu 1 | | Sub SubMenu 2 | | SubMenu 3 | | SubMenu 4 | 

Подменю 1 и 2 в подменю 2 должно появляться только тогда, когда мышь наводится / на ссылку клика, а если нет, то исчезает. Я искал, и следующая ссылка показывает меню, которое я хочу адаптировать к WordPress. Проблема в том, что я не могу установить теги классов на ul и li: http://codepen.io/WhiteWolfWizard/pen/MYQGQQ

Я попытался адаптировать его к классам меню по умолчанию WordPress, но не работал. Коды, которые у меня есть:

МЕНЮ:

  <div id="menubar-menu"> <ul id="menu" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-100"><a href="#">Home</a></li> <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-103"><a href="#">Section 1</a> <ul class="sub-menu"> <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="#">Subsection 1</a></li> <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140"><a href="#">Subsection 2</a></li> <ul class="sub-menu"> <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="#">SUB subsection 1</a></li> <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="#">SUB subsection 2</a></li> </ul> <li id="menu-item-141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-141"><a href="#">Subsection 3</a></li> </ul> </li> </ul></div> <script> $(document).ready(function () { $('#menu .menu-item.menu-item-has-children .trigger-sub-menu i').on('click', function () { $(this).toggleClass('fa-flip-vertical'); $(this).parent().toggleClass('active'); $('#menu .menu-item.menu-item-has-children .sub-menu').toggle(); $('#menu .menu-item.menu-item-has-children .sub-menu .trigger-sub-menu i').removeClass('fa-flip-vertical').parent().removeClass('active'); $('#menu .menu-item.menu-item-has-children .sub-menu').slideUp(); return false; }); $('#menu .menu-item.menu-item-has-children .sub-menu .sub-menu i').on('click', function () { $(this).toggleClass('fa-flip-vertical'); $(this).parent().toggleClass('active'); $('#menu .menu-item.menu-item-has-children .sub-menu').slideToggle(150); return false; }); }); </script> 

CSS:

 #menu .menu-item { float: left; margin: 10px 0 10px 5px; } #menu .menu-item a { position: relative; height: 30px; padding: 0 10px; border-radius: 2px; display: block; -webkit-transition: all 150ms ease; transition: all 150ms ease; color: #8aa4bb; line-height: 30px; white-space: nowrap; } #menu .menu-item a:hover, #menu .menu-item a:active { background: #8aa4bb; color: #fff; } #menu .menu-item a:active { background: #758b9f; } #menu .menu-item a[class*="trigger-"] { padding-right: 40px; } #menu .menu-item ai { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; } #menu .menu-item ai:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; height: 50%; margin: auto; border-left: 1px solid rgba(0, 0, 0, 0.15); } #menu .menu-item.menu-item-has-children { position: relative; } #menu .menu-item.menu-item-has-children .sub-menu { position: absolute; top: 0; right: 0; border-radius: 2px; background: #fff; display: none; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -webkit-transform: translateY(35px); transform: translateY(35px); } #menu .menu-item.menu-item-has-children .sub-menu li { float: none; margin: 0; } #menu .menu-item.menu-item-has-children .sub-menu li a { border-radius: 0; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu { border-top: 1px solid rgba(0, 0, 0, 0.15); background: #758b9f; display: none; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li { width: 100%; display: table; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li a { height: 25px; font-size: 8pt; color: #fff; line-height: 25px; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:first-child a { margin-top: 5px; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:last-child a { margin-bottom: 5px; } 

Любая помощь будет оценена! Заранее спасибо! 🙂

Solutions Collecting From Web of "Создание пользовательского вертикального меню"