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


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");
    });

Эй, я добавил комментарий на ваш вопрос с точным решением. Создан кодекс для вас, чтобы вы могли проверить код и вывод. Пожалуйста, посмотрите
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.


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 по умолчанию не предоставляют навигацию по боковой панели. Несколько учебников по боковой панели начальной загрузки можно найти здесь . Я просто использовал самую основную версию из приведенных выше руководств, чтобы создать пример здесь.

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

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