Выдвижное боковое меню bootstrap

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Sanik, 9 авг 2023.

  1. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Вопрос к верстальщикам. Есть ли возможность при помощи bootstrap сделать выдвижной боковой сайдбар? В мануалах повсюду только меню "Гармошка", как это в стандартной верстке опенкарт. Если такого решения нет в bootstrap, то посоветуйте или дайте ссылку на рабочий мануал на код jquery, который подойдет и будет работать из существующей версией jquery на опенкарт 3.0.2.0
     
    Последнее редактирование: 9 авг 2023
  2. Xronika

    Xronika Новичок

    Сообщения:
    2
    Симпатии:
    0
    Добрый день Sanik
    2 года назад для себя писал мод под "ваш вопрос", с тех пор мод оброс "мясом", но если вы не нашли что-то "подходящее", могу выложить "первоначальный вариант"
    прим.
    1. кроме левого меню есть возможность скрытия "правого фильтра" (на страницах где он есть)
    2. видео как работает могу скинуть в телеге
     
  3. Xronika

    Xronika Новичок

    Сообщения:
    2
    Симпатии:
    0
  4. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Ну модуль мне не подойдет, ибо меню кастомное и переписанное. Выдвижное нужно для мобильных. По примере админки - подходит, разве что зафиксировать и вынести за контейнер, что бы не сдвигало контент вправо при раскрытии, но это не проблема переделать под себя. Самое важное это скрипт, отвечающий за работу меню, только вот я не могу найти где он находится.
    Код:
    <div id="navigation"><span class="fa fa-bars"></span> {{ text_navigation }}</div>
    Убирал класс navigation и fa-bars, что бы найти класс тригер и по нему через поиск найти скрипт - но меню продолжает работать, странно...
     
  5. Tom

    Tom Специалист

    Сообщения:
    905
    Симпатии:
    306
  6. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Код:
    <template>
      <div>
        <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
        <b-sidebar id="sidebar-1" title="Sidebar" shadow>
          <div class="px-3 py-2">
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
              in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
            </p>
            <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
          </div>
        </b-sidebar>
      </div>
    </template>
    Я пробовал, это не работает почему-то, либо версия bootstrap не та
     
  7. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
  8. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Подскажите, а как сделать в этом скрипте, что бы меню закрывалось не только при клике на иконку, а и за блоком меню?
    Код:
    $(document).ready(function () {
      var trigger = $('.hamburger'),
          overlay = $('.overlay'),
         isClosed = false;
    
        trigger.click(function () {
          hamburger_cross();    
        });
    
        function hamburger_cross() {
    
          if (isClosed == true) {        
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
          } else {  
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
          }
      }
     
      $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
      });
    });
     
    Последнее редактирование: 22 авг 2023
  9. Vlad

    Vlad Эксперт

    Сообщения:
    4.156
    Симпатии:
    1.008
    что такое поза?
     
  10. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Имел виду, что бы меню скрывалось при клике в любом месте за блоком меню, а не только при клике на иконку "Закрыть"
     
    Последнее редактирование: 22 авг 2023
  11. Vlad

    Vlad Эксперт

    Сообщения:
    4.156
    Симпатии:
    1.008
    Добавить что то такое

    Код:
    $('.overlay').click(function() {
        $('#wrapper').toggleClass('toggled');
        hamburger_cross();
     })
     
    Sanik нравится это.
  12. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Ставлю body вместо wrapper - не работает почему-то
     
  13. Vlad

    Vlad Эксперт

    Сообщения:
    4.156
    Симпатии:
    1.008
    код проверен на работоспособность именно в том виде к котором дан, без изменений!!!
     
    Sanik нравится это.
  14. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Да, спасибо, это уже решил. У меня вопрос по стандартном меню опенкарт еще. Есть ли какая нибудь настройка или путем написания js, что бы подменю в моб. версии не сворачивалось после нажатия на пункт подменю, а оставалось открытым до обновления страницы?
     
    Последнее редактирование: 25 авг 2023
  15. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Сейчас оно сворачивается при клике в любом месте. Это не очень красиво, если верстка блока подменю отличается от стандартной
    https://bootsnipp.com/snippets/Qb83E
    P/S
    Может кому-то понадобится. В итоге решил вот так
    Код:
        $('.dropdown li a').click( function(e) {
            e.stopPropagation();
        });
     
    Последнее редактирование: 26 авг 2023
  16. Sanik

    Sanik Активный пользователь

    Сообщения:
    299
    Симпатии:
    3
    Еще такой вопрос по теме. А как обойти stopPropagation()? Тут лучше было применить его для всего блока dropdown-menu, что бы подменю не закрывалось при любых кликах, а не только по ссылке "а". Но в тоже время есть один елемент (стрелка выход из подменю) в этом блоке, что бы на него не действовал stopPropagation().