Фиксированная вертикальная навигация

Боковая навигация, которая даст пользователю возможность быстро передвигаться по секциям страницы. Это не замена основной навигации, но в то же время, очень удобное средство для перемещения по странице с объёмным контентом.

Если какие-то страницы вашего сайта излишне объёмные, то пользователям будет сложно быстро найти интересующий их фрагмент. Сегодня мы создадим компонент, который поможет справиться с этой проблемой.

Заголовки секций по умолчанию будут скрыты и отобразятся только при наведении мыши.

HTML структура

Наша навигация будет располагаться в элементе <nav>, где мы создадим список, элементы которого будут служить кнопками для передвижения по секциям. Мы добавили специальный “триггер” для работы компонента на сенсорных устройствах.

<a class="cd-nav-trigger cd-img-replace">Open navigation</a>
<nav id="cd-vertical-nav" >
	<ul>
		<li>
			<a href="#section1" data-number="1">
				<span class="cd-dot"></span>
				<span class="cd-label">Item 1</span>
			</a>
		</li>
		<!-- other navigation items here-->
	</ul>
</nav>

<section id="section1" class="cd-section">
		<!-- content here -->
</section>

<section id="section2" class="cd-section">
		<!-- content here -->
</section>

<!-- other sections here -->

Стили

Мы задействовали классы из Modernizr (классы .touch и .no-touch) для работы компонента с сенсорными устройствами. Если просматривать страницу на широком экране, то в качестве элементов навигации увидим “точки”. Если же открыть страницу на мобильном устройстве, то навигация будет выглядеть так:

Для обыкновенных мониторов мы отключаем тач-триггер и выставляем position: fixed элементу <nav>.

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

.no-touch #cd-vertical-nav {
	/* фиксация навигации */
  	position: fixed;
  	right: 40px;
  	top: 50%;
  	bottom: auto;
  	transform: translateY(-50%);
}

.no-touch #cd-vertical-nav a span {
  	float: right;
  	/* уменьшение размера */
  	transform: scale(0.6);
}

.no-touch #cd-vertical-nav .cd-dot {
  	transform-origin: 50% 50%;
}

.no-touch #cd-vertical-nav .cd-label {
  	transform-origin: 100% 50%;
}

.no-touch #vertical-nav a:hover span {
	/* увеличение размера */
  	transform: scale(1);
}

.no-touch #cd-vertical-nav a:hover .cd-label {
	/* показ надписи */
	opacity: 1;
}

На сенсорных устройствах выставим position: fixed элементу .cd-nav-trigger и <nav> и поместим его в нижний угол. Таким образом основная и вторичная навигация не будут перекрывать друг друга.

При клике по элементу .cd-nav-trigger, добавляем класс .open элементу навигации и посредством CSS3 меняем значение свойства scale с 0 на 1, а так же используем плавную анимацию.

.touch #cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  width: 90%;
  max-width: 400px;
  max-height: 90%;
  transform: scale(0);
  transition-property: transform;
  transition-duration: 0.2s;
}
.touch #cd-vertical-nav.open {
  transform: scale(1);
}

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

По мере продвижения пользователя по странице, функция updateNavigation() проверяет факт активности той или иной секции. В зависимости от этого элементу навигации будет присвоен или удалён класс .is-selected.