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

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

Шаг 1. HTML

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

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

Также не забываем подключить стили к документу, для этого следует разместить следующие строчки между тегами <head> и </head>.

С разметкой закончили, теперь приступим к следующему шагу.

Шаг 2. CSS

Стили достаточно просты, основные элементы подписаны, по этому более детально останавливаться на них не вижу смысла.

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

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