• Страница 1 из 1
  • 1
Выдвигающееся боковое меню на JS/CSS3
Kosten
Суббота, 28 Августа 2021, 01:21 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вашему вниманию оригинальная навигация с боку, где данное бокового меню для сайтов идет без использования тяжелых фреймворков и плагинов. Данная навигация будет выезжать по нажатию на кнопку гамбургера с правого бока. Также это меню будет обладать эффектом аккордеона – раскрывать подменю по нажатию.



HTML

Код
<div id="nav-icon3" class="pushmenu">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<nav class="sidebar">
    <div class="text d-flex p-2">
  <a href="#tel-modal"> Меню Сайта</a>
  <div id="nav-icon3" class="pushmenu opened">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>    
    </div>
    <div class="menu-main-menu-container">
  <ul id="menu-main-menu">
    <li class="current-menu-item"><a href="#" >Главная</a></li>
    <li class="menu-parent-item"><a href="#">Услуги<i></i></a>
  <ul class="sub-menu">
   <li><a href="#">Какая-то услуга 1</a></li>
   <li><a href="#">Какая-то услуга 2</a></li>
   <li><a href="#">Какая-то услуга 4</a></li>
  </ul>
    </li>
    <li><a href="#">Клиентам</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
    </div>
</nav>    
<div class="hidden-overley"></div>

CSS


JS

Код
document.addEventListener('DOMContentLoaded', () => {

    // получаем все элементы с классом pushmenu
    const pushmenu = document.getElementsByClassName('pushmenu');

    // получаем элемент с классом hidden-overley
    const hiddenOverley = document.querySelector('.hidden-overley');

    // отслеживаем клик клика по оверлею
    hiddenOverley.addEventListener('click', (e) => {
  e.currentTarget.classList.toggle('show');
  document.querySelector('.sidebar').classList.toggle('show');
  document.querySelector('body').classList.toggle('sidebar-opened');
  for( i=0; i < pushmenu.length; i++ ){
    pushmenu[i].classList.toggle('open');
  }
    });

    const pushmenuFunction = function() {
  document.querySelector('.pushmenu').classList.toggle('open');
  document.querySelector('.sidebar').classList.toggle('show');
  document.querySelector('.hidden-overley').classList.toggle('show');
  document.body.classList.toggle('sidebar-opened')
    };

    // Отслеживаем клики кнопок с классом pushmenu
    for( i=0; i < pushmenu.length; i++ ){
  pushmenu[i].addEventListener('click', pushmenuFunction, false);
    }

    // Получим все родительские элементы в меню
    const sidebarAccordeon = document.querySelectorAll('.sidebar .menu-parent-item a:first-child');
    const accordeonFunction =  function() {
  this.parentNode.querySelector('ul').classList.toggle('show');
  this.querySelector('i').classList.toggle('rotate');
    }
    // Отслеживаем клики родительских пунктов меню
    for( i=0; i < sidebarAccordeon.length; i++ ){
  sidebarAccordeon[i].addEventListener('click', accordeonFunction, false);
    }
});

Проверенная работа по своему функционалу, что самостоятельно сами можете посмотреть на demo странице.

Демонстрация
Прикрепления: 4734997.jpg (18.1 Kb) · menu-parent.zip (7.3 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: