Простая в интеграции боковая вертикальная навигация, идеально подходящая для панелей мониторинга и административных областей.
Создание адаптивной навигации для мегасайтов никогда не было легкой задачей. Если вы работаете над административной панелью, скорее всего, вам нужно будет спроектировать и разработать вертикальное меню с множеством подкатегорий. Вот почему мы решили поделиться сегодняшним отрывком! Наша боковая панель навигации может облегчить вашу жизнь, предоставляя простой начальный шаблон для вашего следующего проекта;)
⭐ Значки: nucleoapp.com, библиотека значков
Создание структуры
Структура 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 (github.com/kamens/jQuery-menu-aim), модифицированную Vanilla JS, чтобы различать пользователей, пытающихся навести указатель мыши на элемент боковой панели, и пользователей, пытающихся перейти в содержимое подменю (только для настольной версии).
Ссылка на твиттер автора - twitter.com/romano_cla !
