Главная / Верстка сайта / Верстка сайта Адаптивная панель навигации в сайдбаре

Верстка сайта Адаптивная панель навигации в сайдбаре

Легко интегрируемое боковое вертикальное меню для сайта, которое идеально подойдет для панелей администрирования и консолей.

Поддержка браузерами

  • IE — 9+;
  • Chrome – да;
  • Firefox – да;
  • Safari – да;
  • Opera – да.

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

Иконки: библиотека Nucleo.

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

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

<header class="cd-main-header">
<a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>

<div class="cd-search">
<form action="#0">
<input type="search" placeholder="Search…">
</form>
</div> <!— cd-search —>

<a href="#0" class="cd-nav-trigger">Menu<span></span></a>

<nav class="cd-nav">
<ul class="cd-top-nav">
<li><a href="#0">Tour</a></li>
<li><a href="#0">Support</a></li>
<li class="has-children account">
<a href="#0">
<img src="img/cd-avatar.png" alt="avatar">
Account
</a>

<ul>
<li><a href="#0">My Account</a></li>
<!— другие элементы списка —>
</ul>
</li>
</ul>
</nav>
</header> <!— .cd-main-header —>

<main class="cd-main-content">
<nav class="cd-side-nav">
<ul>
<li class="cd-label">Main</li>
<li class="has-children overview">
<a href="#0">Overview</a>

<ul>
<li><a href="#0">All Data</a></li>
<!— другие элементы списка —>
</ul>
</li>
<li class="has-children notifications active">
<a href="#0">Notifications<span class="count">3</span></a>

<ul>
<li><a href="#0">All Notifications</a></li>
<!— другие элементы списка —>
</ul>
</li>

<!— other list items here —>
</ul>

<!— другие маркированные списки—>
</nav>

<div class="content-wrapper">
<!— основной контент —>
</div> <!— .content-wrapper —>
</main> <!— .cd-main-content —>

В основной структуре вертикального многоуровневого меню для сайта элементы .cd-search и .cd-top-nav находятся внутри <header>, а на мобильных устройствах они перемещаются внутрь элемента .cd-side-nav.

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

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

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

.cd-side-nav {
position: absolute;
left: 0;
top: 0;
width: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.2s 0s, visibility 0s 0s;
}

На устройствах со средним размером экрана (окно просмотра шире 768 пикселей) уменьшенная версия вертикального раздвижного меню для сайта отображается по умолчанию: она позиционируется относительно, имеет фиксированную ширину (110 пикселей) и содержит float: left. Таким образом она размещается слева от элемента <main>:

@media only screen and (min-width: 768px) {
.cd-side-nav {
position: relative;
float: left;
width: 110px;
/* переключение стилей */
visibility: visible;
opacity: 1;
}
}

@media only screen and (min-width: 768px) {
.cd-main-content .content-wrapper {
margin-left: 110px;
}
}

На экранах с большой диагональю (окно просмотра шире 1170 пикселей) отображается расширенная версия красивого вертикального меню для сайта.

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

В исходной HTML структуре элементы .cd-search и .cd-top-nav находятся внутри <header>.

На небольших экранах (окно просмотра уже 1170 пикселей) эти элементы перемещаются внутрь красивое вертикальное меню для сайта .cd-side-nav:

var resizing = false;
moveNavigation();
$(window).on(‘resize’, function(){
if( !resizing ) {
window.requestAnimationFrame(moveNavigation);
resizing = true;
}
});

function moveNavigation(){
var mq = checkMQ(); //эта функция возвращает mobile,tablet или desktop

if ( mq == ‘mobile’ && topNavigation.parents(‘.cd-side-nav’).length == 0 ) { //topNavigation = $(‘.cd-top-nav’)
detachElements();
topNavigation.appendTo(sidebar); //sidebar = $(‘.cd-side-nav’)
searchForm.prependTo(sidebar);
} else if ( ( mq == ‘tablet’ || mq == ‘desktop’) && topNavigation.parents(‘.cd-side-nav’).length > 0 ) {
detachElements();
searchForm.insertAfter(header.find(‘.cd-logo’)); //header = $(‘.cd-main-header’)
topNavigation.appendTo(header.find(‘.cd-nav’));
}
resizing = false;
}

function detachElements() {
topNavigation.detach();//topNavigation = $(‘.cd-top-nav’)
searchForm.detach();//searchForm = $(‘.cd-search’)
}

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

Перевод статьи «Responsive Sidebar Navigation» был подготовлен дружной командой проекта Сайтостроение от А до Я.

О нас seoexpert

продвижение сайта,seo оптимизация,поисковое продвижение,раскрутка сайтов,поисковая оптимизация,продвижение сайта в гугл,seo раскрутка,продвижение сайтов в яндексе,продвижение сайта в google,продвижение сайтов в топ 10,Оптимизация и продвижение сайтов,услуги продвижения сайта,заказать продвижение,продвижение сайтов в топ,сео раскрутка сайта

Смотрите также

Создание цветной рамки вокруг текста с помощью HTML и CSS

Рамка на HTML-страницах, созданная с помощью border color, помогает привлечь внимание к тексту или выделить ...