Боковая панель, открытая по умолчанию на рабочем столе, закрытая на мобильном телефоне

9

У меня возникли реальные проблемы, когда я пытаюсь заставить мою боковую панель / навигационный контент (используя 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 
— Фрэнк Доу
источник
Эй, я добавил комментарий на ваш вопрос с точным решением. Создан кодекс для вас, чтобы вы могли проверить код и вывод. Пожалуйста, посмотрите
— Priyanka
У вас есть другие CSS?
— Codeply-er
Простой добавить classи стиль его под запрос медиаwidth:600
— Awais

Ответы:

0

Вот ссылка, что вам нужно прямо сейчас. Я создал ручку для вас. Пожалуйста, посмотрите на ссылку ниже.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="theMenu">
  <a class="navbar-brand" id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </a>      
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" id="main-menu">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Writing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Events</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Speaking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Music</a></li>
            <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>
  </nav>

https://codepen.io/pgurav/pen/abbQZJL

— Приянка
источник
0

Я создал для вас пример, основанный на документации bs4 относительно внешнего контента.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

В этом примере код свернут сверху - вместо справа. На самом деле я нахожусь в отпуске и постараюсь завершить пример, чтобы соответствовать вашим потребностям.

Дополнительный JavaScript:

var externalContent = $('#navbarToggleExternalContent'),
    execOnResize = function(){
// also the next line was only for use in jsfiddle
// in the real world you need to use window.outerWidth
// 992 pixel is the width of breakpoint corresponding to the class "navbar-expand-lg". Feel free to adapt it to fit your needs.
    if(window.innerWidth >= 992){
        externalContent.addClass('show');
    }else{
        externalContent.removeClass('show');
    }
};
// the next line was only addded for jsfiddle       
execOnResize();

window.onresize = function(event) {
    execOnResize();
};

window.addEventListener('load', function() {
    execOnResize();
})

Я также создал скрипку, чтобы увидеть ее в действии, измените размер внутреннего окна в jsfiddle.

— MattOpen
источник
0

Ваш текущий код Javascript всегда будет работать, независимо от устройства. Что вам нужно, это способ проверить, является ли устройство компьютером или мобильным телефоном.

Одним из способов будет использование браузера UserAgent:

$('.menu-close').on('click', function(){
    if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
        //mobile
        $('#menuToggle').toggleClass('active');
        $('body').toggleClass('body-push-toright');
        $('#theMenu').toggleClass('menu-open');
        alert("Test");
    }
});

Или вы можете просто полагаться на ширину окна (но небольшие окна рабочего стола будут рассматриваться как мобильная версия):

if(window.innerWidth <= 767) { // a certain threshold value, in pixels
    //mobile
    //do something
}
— Анис Р.
источник
Обнаружение строки агента пользователя приводит к коду, который трудно поддерживать. Медиа-запросы намного лучше.
— kmoser
Что «трудно поддерживать» в одной строке? В любом случае вы можете заключить эту проверку в функцию, чтобы при необходимости обновлять строку у вас была только одна строка кода для редактирования.
— Анис Р.
Кроме того, вы не можете использовать медиазапросы CSS для переключения имен классов, как того хочет ОП
— Анис Р.
Строки User Agent устройства меняются со временем по мере создания новых устройств. В результате получается код, который ломается каждый раз, когда появляются новые устройства. Конечно, вы можете обернуть это в функцию, но она все равно требует, чтобы вы меняли ее всякий раз, когда вводится новое устройство. Целевые устройства лучше ориентировать на их размер (используя медиазапросы CSS), а не на строку агента пользователя. Никакие обновления не требуются, когда новое устройство введено. OP не обязательно хотел переключать имена классов; это была их лучшая попытка найти решение, которое, я считаю, уступает запросам в СМИ.
— kmoser
0

Сначала просто пара баллов:

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

  2. Ваши пункты меню находятся в <ul>(неупорядоченном списке) без каких-либо <li>(элементов списка). Для корректной работы bootsrap js / css, вероятно, нужны <li>s. Технически a <ul>без любого <li>является допустимым html, но единственное содержимое, разрешенное в a, <ul>это <li>s, поэтому якоря (или что-либо еще) внутри a <ul>должны содержаться внутри <li>s, чтобы быть действительными.

  3. Я не уверен, что именно вы пытаетесь сделать с социальными иконками, поэтому я просто немного подкорректировал их так, что это кажется разумным.

  4. Я добавил overflow-y: scroll;на <html>элемент так , что при открытии на маленьком экране меню не будет причиной сдвига , если полоса прокрутки будет добавлен. Может не понадобиться в зависимости от дизайна вашего сайта и макета контента.

Итак, давайте начнем с очень простого адаптивного меню.

Основное отзывчивое меню начальной загрузки

Показать фрагмент кода

Хорошо, это выглядит хорошо, но у вас было изображение в меню. Поэтому я добавлю изображение в меню и добавлю немного стиля для его оформления. Затем с изображением нам понадобится немного дополнительного CSS, чтобы красиво расположить элементы меню:

  1. Поместите кнопку гамбургера так, чтобы она сидела в нижней части панели навигации. Я буду использовать 200px картинки и вычесть несколько бэров. Вы можете изменить на, top: calc(100px - 1rem);чтобы top: 1rem;положить гамбургер сверху, или bottom: 1rem;если вы хотите, чтобы гамбургер прилип к нижней части навигационной панели, даже когда он открыт. Или просто удалите все это правило, чтобы использовать загрузочное значение по умолчанию, которое помещает гамбургер в вертикальную середину.

  2. Расположите элементы меню так, чтобы они также располагались в нижней части строки меню, когда они не свернуты.

  3. поместите социальные иконки также внизу, но подтолкните их к правой стороне.

  4. Числа 2 и 3, приведенные выше, должны применяться только выше средней точки останова, когда меню не свернуто, поэтому я помещу их в медиазапрос, чтобы нацелить его на 768 пикселей (средняя точка останова начальной загрузки). Это также может быть сделано с загрузочными миксинами sass breakpoint, но здесь мы будем использовать простой CSS. Вы можете увидеть расположение этих элементов в правиле запроса @media в CSS, где вы можете изменить его, чтобы поместить их в верхнюю часть панели. Или просто удалите эти правила, чтобы вернуться к настройкам по умолчанию при начальной загрузке, которые центрируют элементы меню по вертикали и помещают социальные значки под ними. Вы также можете поместить социальные иконки в <li>элементы меню, <ul>если хотите, чтобы значки попадали прямо в меню, как и другие пункты меню.

с изображением в меню

Показать фрагмент кода

Хорошо, но вы сказали, что это была боковая панель. Я не очень знаком с bootstrap, но я понимаю, что ни v3, ни v4 по умолчанию не предоставляют навигацию по боковой панели. Несколько учебников по боковой панели начальной загрузки можно найти здесь . Я просто использовал самую основную версию из приведенных выше руководств, чтобы создать пример здесь.

Складная боковая панель

Показать фрагмент кода

— Veneseme Tyras
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.