Фиксированная вертикальная навигация
Боковая навигация, которая даст пользователю возможность быстро передвигаться по секциям страницы. Это не замена основной навигации, но в то же время, очень удобное средство для перемещения по странице с объёмным контентом.
Если какие-то страницы вашего сайта излишне объёмные, то пользователям будет сложно быстро найти интересующий их фрагмент. Сегодня мы создадим компонент, который поможет справиться с этой проблемой.
Заголовки секций по умолчанию будут скрыты и отобразятся только при наведении мыши.
HTML структура
Наша навигация будет располагаться в элементе <nav>
, где мы создадим список, элементы которого будут служить кнопками для передвижения по секциям. Мы добавили специальный “триггер” для работы компонента на сенсорных устройствах.
<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 -->
Стили
Мы задействовали классы из Modernizr (классы .touch
и .no-touch
) для работы компонента с сенсорными устройствами. Если просматривать страницу на широком экране, то в качестве элементов навигации увидим “точки”. Если же открыть страницу на мобильном устройстве, то навигация будет выглядеть так:
Для обыкновенных мониторов мы отключаем тач-триггер и выставляем position: fixed
элементу <nav>
.
При наведении курсора по элементу навигации воспользуемся несколькими визуальными эффектами.
.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; }
На сенсорных устройствах выставим position: fixed
элементу .cd-nav-trigger
и <nav>
и поместим его в нижний угол. Таким образом основная и вторичная навигация не будут перекрывать друг друга.
При клике по элементу .cd-nav-trigger
, добавляем класс .open
элементу навигации и посредством CSS3 меняем значение свойства scale с 0 на 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); }
Обработка событий
По мере продвижения пользователя по странице, функция updateNavigation()
проверяет факт активности той или иной секции. В зависимости от этого элементу навигации будет присвоен или удалён класс .is-selected
.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/vertical-fixed-navigation/
Перевел: Станислав Протасевич
Урок создан: 18 Марта 2016
Просмотров: 12913
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.