Боковая навигация с ajax переходом по страницам

Создаём страницу с боковой навигацией и ajax (анимированным) переходом по её разделам.

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

1. Разметка html. Это разметка одного из разделов страницы, полную разметку вы можете увидеть в сиходниках прикреплённых к новости.

<nav class="cd-side-navigation">
<ul>
<li>
<a href="index.html" class="selected" data-menu="index">
<svg></svg>
Intro
</a>
</li>
<li>
<!-- ... -->
</li>
</ul>
</nav> 
<main class="cd-main">
<section class="cd-section index visible">
<header>
<div class="cd-title">
<h2>Заголовок #2</h2>
<span>Описание</span>
</div>
<a href="#index-content" class="cd-scroll">Scroll Down</a>
</header>
<div class="cd-content" id="index-content">
</div> <!-- .cd-content -->
</section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<div id="cd-loading-bar" data-scale="1" class="index"></div>

2. Оформление CSS

.cd-side-navigation {
position: fixed;
z-index: 3;
top: 0;
left: 0;
height: 100vh;
width: 94px;
overflow: hidden;
}
.cd-side-navigation ul {
height: 100%;
overflow-y: auto;
}
.cd-side-navigation::before {
/* фон навигации меню */
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 4px);
background-color: #131519;
}
.cd-side-navigation li {
width: calc(100% - 4px);
}
.cd-side-navigation a {
display: block;
position: relative;
}
.cd-side-navigation a::after {
content: '';
position: absolute;
top: 0;
right: -4px;
height: 100%;
width: 4px;
background-color: #83b0b9;
opacity: 0;
}
.no-touch .cd-side-navigation a:hover::after {
opacity: 1;
}

3. Остаётся подключить javascript и готово

<script src="js/jquery-2.1.4.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->

Вот, что у нас получилось