Адаптивная панель навигации

demosourse

Простая и удобная панель навигации. Идеально подойдёт для панелей администрирования.

Структура

HTML структура состоит из двух основных элементов: <header>, с лого сайта, формой поиска, верхней навигацией; и элемент <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>
					<!-- other list items here -->
				</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>
					<!-- other list items here -->
				</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>
					<!-- other list items here -->
				</ul>
			</li>

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

		<!-- other unordered lists here -->
	</nav>

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

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

Стили

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

Для мелких устройств, панель будет занимать 100% ширины, позиция: absolute, по умолчанию скрыта (visibility: hidden). При клике/тапе по .cd-nav-trigger, режим отображения изменится (используя класс .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;
}

Для экранов средних размеров (более 768px) отобразим минимизированное состояние навигации. Позиция:relative, фиксированная ширина (110px) и float: left, чтобы она прилипла к левой стороне элемента <main>.

@media only screen and (min-width: 768px) {
  .cd-side-nav {
    position: relative;
    float: left;
    width: 110px;
    /* reset style */
    visibility: visible;
    opacity: 1;
  }
}

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

Для более крупных экранов (более 1170px) сразу же покажем полностью раскрытую версию.

Работа с событиями

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

Для мелких экранов (менее 1170px), переместим эти элементы в .cd-side-nav.

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

function moveNavigation(){
var mq = checkMQ(); //this function returns mobile,tablet or 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 для более удобной работы с навигацией.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/responsive-sidebar-navigation/
Перевел: Станислав Протасевич
Урок создан: 30 Октября 2015
Просмотров: 15050
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^