Вертикальная навигация на CSS

Простая фиксированная в правой части экрана вертикальная навигация реализованная на CSS, позволяющая быстро перемещаться по странице.

Как реализовать:

1. Разметка html

<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 -->

Еще один приятный бонус — это адаптивность навигации, то есть в стандартных разрешениях экрана навигация будет выглядеть так:

В мобильных же разрешениях навигация будет выглядеть иначе:

Продолжим..

2. Подключаем стили CSS

.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;
}
.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);
}