Адаптивная навигация боковой панели в CSS и JavaScript

Простая в интеграции боковая вертикальная навигация, идеально подходящая для панелей мониторинга и административных областей.



ДЕМО
ИСХОДНИКИ


Создание адаптивной навигации для мегасайтов никогда не было легкой задачей. Если вы работаете над административной панелью, скорее всего, вам нужно будет спроектировать и разработать вертикальное меню с множеством подкатегорий. Вот почему мы решили поделиться сегодняшним отрывком! Наша боковая панель навигации может облегчить вашу жизнь, предоставляя простой начальный шаблон для вашего следующего проекта;)

⭐ Значки: Nucleo, библиотека значков

Создание структуры

Структура HTML состоит из двух основных элементов: элемента <header>, содержащего логотип веб-сайта, формы поиска, триггера навигации (.cd-nav-trigger - только в мобильной версии) и верхней панели навигации, а также элемента <main>. элемент, содержащий основное содержимое страницы (div.content-wrapper) и навигацию на боковой панели (nav.cd-side-nav).


<header class="cd-main-header js-cd-main-header">
   <div class="cd-logo-wrapper">
      <a href="#0" class="cd-logo"><img src="assets/img/cd-logo.svg" alt="Logo"></a>
    </div>
 
   <div class="cd-search js-cd-search">
      <form>
        <input class="reset" type="search" placeholder="Search...">
      </form>
    </div> <!-- cd-search -->

   <button class="reset cd-nav-trigger js-cd-nav-trigger" aria-label="Toggle menu"><span></span></button>

   <ul class="cd-nav__list js-cd-nav__list">
      <li class="cd-nav__item"><a href="#0">Tour</a></li>
      <li class="cd-nav__item"><a href="#0">Support</a></li>
      <li class="cd-nav__item cd-nav__item--has-children cd-nav__item--account js-cd-item--has-children">
         <a href="#0">
            <img src="assets/img/cd-avatar.svg" alt="avatar">
            <span>Account</span>
         </a>
    
         <ul class="cd-nav__sub-list">
            <li class="cd-nav__sub-item"><a href="#0">My Account</a></li>
            <!-- other list items here -->
         </ul>
      </li>
    </ul>
</header> <!-- .cd-main-header -->

<main class="cd-main-content">
   <nav class="cd-side-nav js-cd-side-nav">
      <ul class="cd-side__list js-cd-side__list">
         <li class="cd-side__label"><span>Main</span></li>
         <li class="cd-side__item cd-side__item--has-children cd-side__item--overview js-cd-item--has-children">
            <a href="#0">Overview</a>
          
            <ul class="cd-side__sub-list">
               <li class="cd-side__sub-item"><a href="#0">All Data</a></li>
               <!-- other list items here -->
            </ul>
        </li>

        <li class="cd-side__item cd-side__item--has-children cd-side__item--notifications cd-side__item--selected js-cd-item--has-children">
            <a href="#0">Notifications<span class="cd-count">3</span></a>
          
            <ul class="cd-side__sub-list">
               <li class="cd-side__sub-item"><a href="#0">All Notifications</a></li>
               <!-- other list items here -->
            </ul>
        </li>
    
        <!-- other list items here -->
      </ul>
    
      <!-- other unordered lists here -->
    </nav>

   <div class="cd-content-wrapper">
      <!-- main content here -->
   </div> <!-- .cd-content-wrapper -->
</main> <!-- .cd-main-content -->

В исходной структуре HTML элементы .cd-search и .cd-nav__list находятся внутри <header>, тогда как на мобильных устройствах они перемещаются внутри элемента .cd-side-nav (подробнее ниже в разделе «Обработка событий»).

Добавление стиля

Мы создали 2 разных конфигурации боковой панели в зависимости от размера экрана.

На небольших устройствах боковая панель имеет 100% ширину, находится в абсолютном положении и по умолчанию скрыта (видимость: скрыта). Когда пользователь щелкает / касается триггера .cd-nav-trigger, видимость боковой панели изменяется на видимую (с использованием класса .cd-side-nav - is-visible).


.cd-side-nav {
  position: absolute;
  z-index: var(--zindex-header);
  left: 0;
  top: var(--cd-header-height);
  width: var(--cd-sidebar-width);
  transition: .2s;
  visibility: hidden;
  opacity: 0;
}

.cd-side-nav--is-visible {
  opacity: 1;
  visibility: visible;
}

На больших устройствах (размер окна просмотра больше 1024 пикселей) отображается расширенная версия боковой панели.

Обработка событий

По умолчанию элементы .cd-search и .cd-nav__list находятся внутри <header>.

На небольших устройствах (размер окна просмотра меньше 1024 пикселей) мы перемещаем эти элементы в область навигации .cd-side-nav.


//on resize, move search and top nav position according to window width
var resizing = false;
window.addEventListener('resize', function(){
  if(resizing) return;
  resizing = true;
  (!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
});
window.dispatchEvent(new Event('resize'));//trigger the moveNavigation function

function moveNavigation(){
  var mq = checkMQ();
  if ( mq == 'mobile' && !Util.hasClass(navList.parentNode, 'js-cd-side-nav') ) {
    detachElements();
    sidebar.appendChild(navList);
    sidebar.insertBefore(searchInput, sidebar.firstChild);
  } else if ( mq == 'desktop' && !Util.hasClass(navList.parentNode, 'js-cd-main-header') ) {
    detachElements();
    mainHeader.appendChild(navList);
    mainHeader.insertBefore(searchInput, mainHeader.firstChild.nextSibling);
  }
  resizing = false;
};

function detachElements() {
  searchInput.parentNode.removeChild(searchInput);
  navList.parentNode.removeChild(navList);
};

Кроме того, мы интегрировали версию плагина jQuery-menu-aim, модифицированную Vanilla JS, чтобы различать пользователей, пытающихся навести указатель мыши на элемент боковой панели, и пользователей, пытающихся перейти в содержимое подменю (только для настольной версии).


🔖 Выбор по тегам ×

Top