#wordpress #twitter-bootstrap #drop-down-menu
#wordpress #twitter-bootstrap #выпадающее меню
Вопрос:
Я работаю с темой bootstrap basic WordPress, которая использует wp-bootstrap-navwalker.
У меня есть одна страница (страница X) на моем сайте, где я хотел бы, чтобы боковое меню отображалось справа с подстраницами, а главное меню находилось вверху.
Я использовал плагин advanced-sidebar-menu, который создает меню боковой панели на основе отношений родитель / потомок (поэтому на странице X есть несколько дочерних страниц). Теперь это автоматически превращает родительскую страницу X в выпадающее меню.
Я бы хотел, чтобы это выпадающее меню было деактивировано на рабочих столах (или экранах определенного размера), при этом вы нажимаете на страницу, и она приводит вас к первому дочернему элементу этой страницы.
На мобильных устройствах я бы хотел, чтобы выпадающий список отображался, а боковая панель была скрыта, поскольку это упрощает навигацию..
Скрыть боковую панель не сложно. Но кажется, что с помощью выпадающего меню я могу либо постоянно включать его, либо постоянно отключать — ?
Если я добавлю класс disabled (class =»выпадающий список-переключатель отключен»), я могу сделать родительскую страницу X интерактивной и эффективно скрыть выпадающий список. Однако тогда он вообще не работает на мобильных устройствах. Если я не добавлю «отключено» и не скрою dropbox с помощью CSS в зависимости от размера экрана, страница X не будет доступна для просмотра, и поэтому вы никогда не сможете увидеть дочерние страницы страницы X.
Есть ли способ скрыть выпадающее меню на рабочих столах, при нажатии на родительскую страницу вы попадаете на первую дочернюю страницу И включаете ее на мобильных устройствах?
Публикация кода немного сложна, поэтому вместо этого я прикрепил скриншот меню. В принципе, я не хочу, чтобы выпадающий список отображался на больших экранах, а только на маленьких экранах…
Ответ №1:
Вот пример, который вы можете показать, скрыть определенный элемент на другом размере экрана, надеюсь, это поможет, протестируйте эту демонстрацию на другом размере экрана
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="visible-xs hidden-sm hidden-md hidden-lg text-info"><h1>Visible in xs devices</h1></div>
<div class="visible-sm hidden-xs hidden-md hidden-lg text-info"><h1>Visible in sm devices</h1></div>
<div class="visible-md hidden-sm hidden-xs hidden-lg text-info"><h1>Visible in md devices</h1></div>
<div class="visible-lg hidden-sm hidden-md hidden-xs text-info"><h1>Visible in lg devices</h1></div> Комментарии:
1. спасибо, что почти работает! но если я отключу родительский элемент выпадающего списка (class =»dropdown-toggle disabled»), чтобы сделать его интерактивным в настольной версии, он не сворачивается в мобильном меню (т. Е. Подстраницы отображаются автоматически, в то время как обычно вы сначала нажимаете на родительский элемент, чтобы отобразить подстраницы). Есть ли способ отображать выпадающий список только на мобильных устройствах, как с помощью вашего метода, но при этом иметь его полностью функциональным?
2. да, вы можете добавить два выпадающих списка: один для рабочего стола и один для мобильных устройств, просто сделайте выпадающий список для мобильных устройств n показать его на мобильных устройствах n для использования на рабочем столе просто button..no нужно сделать выпадающий список для этого случая … или вы можете добавить visible-xs или visible-sm внутри тега ul (это делает выпадающий список) или вы можете сделать это программно с помощью jquery, найдя тип устройства, которое у вас есть .. как только вы получите тип устройства, которое у вас есть, просто удалите или добавьте атрибут data-toggle, чтобы он отображался и скрывался соответственно .. если это решение сработало для вас, тогда, пожалуйста, проголосуйте и примите решениеответ .. удачи, чувак…
3. да, блестяще, я добавил два пункта меню в WordPress, один с подстраницами, а другой без. Затем я добавил классы выше, и теперь один или другой отображается только в зависимости от размера экрана. приветствия!