Submit your widget

Vertical Fixed Navigation with jQuery

Created 4 years ago   Views 19375   downloads 4816    Author codyhouse
Vertical Fixed Navigation with jQuery
View DemoDownload 58.6 KB
Share |

A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them.

The basic idea behind putting round indicators on the side of a web page, is to give a hint to the user about the number of sections she/he can go through. We think of each dot as a content chapter, with its own title. Usually, users have to hover over a dot to access the title.

In an attempt to simplify this pattern, we decided to transform the dots when the user interacts with them, by scaling them up and showing an icon + label. Users don’t need to select a specific dot/item, but just move to the side, thus showing their willingness to access the navigation.

Creating the structure

Our navigation is an unordered list wrapped in a A is used to open the navigation on small devices.
Besides, a has been created for each navigation item.

<nav class="cd-vertical-nav">
		<li><a href="#section1" class="active"><span class="label">Intro</span></a></li>
		<li><a href="#section2"><span class="label">Events</span></a></li>
		<!-- additional navigation items here -->
</nav><!-- .cd-vertical-nav -->
<button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button>
<section id="section1" class="cd-section">
	<div class="content-wrapper">
		<h1>Vertical Fixed Navigation #2</h1>
		<a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a>
</section><!-- cd-section -->
<section id="section2" class="cd-section">
	<div class="content-wrapper">
		<!-- section content here -->
</section><!-- cd-section -->
<!-- additional sections here -->

Adding style

On small devices (viewport width smaller than 800px), we set a position: fixed for the .cd-nav-trigger and <nav> elements and  placed them at the bottom-right corner of the page; we then scale down the navigation, using the bottom-right corner as transform origin.

When user clicks on the .cd-nav-trigger element, we give the .open class to the navigation to change its scale value from 0 to 1, with a CSS3 transition to achieve a smooth animation.

.cd-nav-trigger {
  display: block;
  position: fixed;
  z-index: 2;
  bottom: 30px;
  right: 5%;
.cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 5%;
  bottom: 30px;
  transform: scale(0);
  transform-origin: right bottom;
  transition: transform 0.2s;
} {
  transform: scale(1);

Read more: