Давно я не писал про красивую навигацию на сайте и как ее реализовать, сегодня видать тот самый день, когда сошлись звезды и пора выкатить интересный урок о навигационном меню для сайта. Не буду скрывать, я уже не раз писал уйму уроков о чем-то похожем, но каждый раз в голову приходят разные мысли которыми хочется поделиться с читателями. Идея навигации не новая, ее часто применяют на сайте в виде дополнительного меню, которые прикручено где-то в низу сайта и доносит до посетителя дополнительную информацию.

 

Наше меню будет нечто похоже, мы создадим гамбургер кнопку, которая будет находиться постоянно в прилепленном состоянии в низу страницы в левом углу. При нажатии на нее буде моментально разворачиваться полноэкранная навигация, обратите внимания, что скорость ее работы будет составлять 60FPS, что добавляет общей скорости к сайту. Смотрите также бесплатные и не только шаблоны для вашего сайта:

Шаг 1. HTML

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

Мы присвоили к кнопкам класс btn, позже в стилях мы его обыграем и придадим стилей, вторая часть разметки будет создание самого содержания кнопки, то есть то, что мы увидим при нажатии:

Здесь мы также добавили классы для ссылки, так как при наведении курсора на ссылку в меню, у нас будет небольшая анимация с выделением, чтобы подчеркнуть активный пункт меню.

Шаг 2. CSS

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

Затем нужно не упасть лицом в грязь перед посетителями и сделать красивую кнопку навигации, которая будет у нас круглая с тригерами:

Cледующим шагом будет стилизация навигации которая будет отображаться при развертывании меню, делаем мы это следующим образом:

Также придаем стилей для ссылки, когда мы наводим курсор на ссылку:

Шаг 3. JS

Последним шагом станет добавление немного магии, да шучу конечно, нам просто надо сделать быструю анимацию, переключения тригера навигации и красивое развертывание и свертывание, поможет нам в этом вот такой код js:

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

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