У меня возникли реальные проблемы, когда я пытаюсь заставить мою боковую панель / навигационный контент (используя Bootstrap) показывать (расширяться) по умолчанию на рабочем столе и закрывать по умолчанию на мобильном телефоне, а значок отображается только на мобильном телефоне. Я не могу заставить это работать.
<nav class="menu menu-open" id="theMenu">
<div class="menu-wrap">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
</button>
<div id="menu-logo">
<img src="Final_Logo.png" width="210" height="214" alt="">
</div>
<div id="navbarToggleExternalContent">
<ul id="main-menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Writing</a>
<a href="#">Events</a>
<a href="#">Speaking</a>
<a href="#">Music</a>
</ul>
<ul id="social-icons">
<li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
<li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
<li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
</ul>
</div>
</div>
</nav>Я пытался использовать этот код JavaScript, но безрезультатно:
$('.menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toright');
$('#theMenu').toggleClass('menu-open');
alert("Test");
});
javascript
html
css
bootstrap-4
responsive-design
Фрэнк Доу
источник
источник
classи стиль его под запрос медиаwidth:600Ответы:
Похоже, что здесь ответили: https://stackoverflow.com/a/36289507/378779 В основном, добавьте один из
navbar-expand-*классов к вашему<nav>, например:источник
Вы можете использовать CSS Media Query, чтобы скрыть / показать контент в другом окне просмотра / устройстве.
источник
Вот ссылка, что вам нужно прямо сейчас. Я создал ручку для вас. Пожалуйста, посмотрите на ссылку ниже.
https://codepen.io/pgurav/pen/abbQZJL
источник
Я создал для вас пример, основанный на документации bs4 относительно внешнего контента.
В этом примере код свернут сверху - вместо справа. На самом деле я нахожусь в отпуске и постараюсь завершить пример, чтобы соответствовать вашим потребностям.
Дополнительный JavaScript:
Я также создал скрипку, чтобы увидеть ее в действии, измените размер внутреннего окна в jsfiddle.
источник
Ваш текущий код Javascript всегда будет работать, независимо от устройства. Что вам нужно, это способ проверить, является ли устройство компьютером или мобильным телефоном.
Одним из способов будет использование браузера
UserAgent:Или вы можете просто полагаться на ширину окна (но небольшие окна рабочего стола будут рассматриваться как мобильная версия):
источник
Сначала просто пара баллов:
Вы сказали, что боковая панель, но ваша разметка на самом деле не похожа на боковую панель, она выглядит как отзывчивый topnav. Я постараюсь разобраться в этом как можно лучше, и я также продемонстрирую рабочую боковую панель, на случай, если вы действительно этого хотите.
Ваши пункты меню находятся в
<ul>(неупорядоченном списке) без каких-либо<li>(элементов списка). Для корректной работы bootsrap js / css, вероятно, нужны<li>s. Технически a<ul>без любого<li>является допустимым html, но единственное содержимое, разрешенное в a,<ul>это<li>s, поэтому якоря (или что-либо еще) внутри a<ul>должны содержаться внутри<li>s, чтобы быть действительными.Я не уверен, что именно вы пытаетесь сделать с социальными иконками, поэтому я просто немного подкорректировал их так, что это кажется разумным.
Я добавил
overflow-y: scroll;на<html>элемент так , что при открытии на маленьком экране меню не будет причиной сдвига , если полоса прокрутки будет добавлен. Может не понадобиться в зависимости от дизайна вашего сайта и макета контента.Итак, давайте начнем с очень простого адаптивного меню.
Основное отзывчивое меню начальной загрузки
Показать фрагмент кода
Хорошо, это выглядит хорошо, но у вас было изображение в меню. Поэтому я добавлю изображение в меню и добавлю немного стиля для его оформления. Затем с изображением нам понадобится немного дополнительного CSS, чтобы красиво расположить элементы меню:
Хорошо, но вы сказали, что это была боковая панель. Я не очень знаком с bootstrap, но я понимаю, что ни v3, ни v4 по умолчанию не предоставляют навигацию по боковой панели. Несколько учебников по боковой панели начальной загрузки можно найти здесь . Я просто использовал самую основную версию из приведенных выше руководств, чтобы создать пример здесь.
Складная боковая панель
Показать фрагмент кода
источник