Боковая навигация с ajax переходом по страницам
Создаём страницу с боковой навигацией и ajax (анимированным) переходом по её разделам.
Как реализовать:
1. Разметка html. Это разметка одного из разделов страницы, полную разметку вы можете увидеть в сиходниках прикреплённых к новости.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.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 и готово
|
1 2 3 |
<script src="js/jquery-2.1.4.js"></script> <script src="js/velocity.min.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery --> |
Вот, что у нас получилось
Скачать Боковая навигация с ajax переходом по страницам:
