Вертикальная навигация на CSS
Простая фиксированная в правой части экрана вертикальная навигация реализованная на CSS, позволяющая быстро перемещаться по странице.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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
|
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 44 45 46 47 48 |
.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); } |
