Мы заходим на сайт для того, чтобы найти интересующую вас информацию, но часто информации так много, что не сразу удается найти визуально необходимый абзац или слово. Но как поступать тем, кто создает сайт, и хочет помочь посетителю, например организовать навигацию по заголовкам, чтобы пользователь при выборе пункта смог, сразу переходил к необходимому предложению, кроме этого страница прокручивалась, а навигация с выбором всегда оставалась на виду. В данном уроке мы рассмотрим как это все можно реализовать.

Такой вариант организации материала довольно эффективный. В этом уроке мы будем использовать один из новых элементов HTML5, а именно nav тега, в качестве контейнера для горизонтального списка ссылок. 

Самое главные элементы, которые мы будем использовать, это библиотека JQuery и Waypoints плагин, который будет обеспечивать расширенную функциональность. Когда пользователь прокручивает страницу вниз, панель навигации будет придерживаться в верхней части окна, а также изменять активную информацию для указания текущего раздела. Кроме этого мы будем использовать плагин, ScrollTo, с тем чтобы обеспечить плавную прокрутку и удобное позиционирование, когда пользователь кликает по ссылкам навигации. И так, приступим.

Шаг 1. HTML

Я уверен, что вы уже знакомы с различными новыми элементами , которые были введены с HTML5. В этом примере мы будем использовать два класса: <nav> и <section>. Вот что с этого получилось.

Мы собираемся установить для навигации ширину. Сделаем это на 28px шире, чем оболочка, и сдвинем ее немного влево. Давайте также сделаем слегка закругленные верхние края, используем border-*-radius , а также некоторые произвольные отступы.

Далее, мы собираемся добавить неупорядоченный список ссылок в панель навигации, и установим для него элементы display: inline-block для того, чтобы поместить их всех в одну строку.

Шаг 2. Загнутые углы

Нам необходимо реализовать загнутые углы, которые будут визуально обхватывать страницу, для этого мы будем использовать border-radius, nav-left и nav-right. Кроме этого мы зададим абсолютное позиционирование и немного теней, для большего реализма.

Шаг 3. Плавная прокрутка

Для достижения плавающего эффекта заголовка, мы будем использовать JQuery плагин который называется Waypoints, от Caleb Troughton. Его единственной целью является вызов события, когда пользователь прокручивает до определенного элемента списка. Плагин очень простой, но предлагает большую гибкость.

Добавляем следующие команды чтобы увидеть всплывающее сообщение при прокрутке панели навигации.

Теперь, для того чтобы достичь желаемого эффекта, мы должны приложить наши навигации в контейнер.

Однако, если вы медленно прокручиваете страницу вниз, мимо точки которую вы только что создали, вы, вероятно, заметили, что, как  содержание «прыгает» немного вверх из-за навигационной панели. Это выглядит очень не аккуратно, такое поведение панели может скрыть часть вашего контента и ухудшить читаемость. К счастью, все это легко исправить — добавить следующий код в функции и скачков больше не будет.

Шаг 4. Вертикальная прокрутка

Оffset позволяет создавать фактическую точку с переменным расстоянием от верхнего элемента. Положительное значение вызывает точку, когда верхний элемент находится на заданном расстоянии ниже верхней части окна. 

Далее нам необходимо задать градиенты для фона панели.

Шаг 5. Смещение к заголовку

Одна вещь, которую автор плагина предусмотрел в Waypoints это возможность создания динамической точки смещения к контенту:

Кроме этого, вы хотите, чтобы при выборе определенного элемента, у вас происходила плавная прокрутка и смещение панели к заголовкам, получаем данный эффект с помощью следующей команды.

Все остальные элементы вы можете просмотреть в исходниках.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: