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

 

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

Шаг 1. HTML

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

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

Шаг 2. СSS

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

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

При наведении на необходимый пункт у нас будет происходить выделение, реализуем благодаря следующего кода:

Полная анимация реализованная большой частью кода, нам необходимо сделать эффект «дрожания» при перемотке блока выделения, полные стили посмотрите в исходниках. Теперь добавляем стили для выпадающего списка:

Адаптивность получаем в виде вертикального меню, обратите внимание, что такое меню будет адаптированно только под мобильные устройства:

В результате такая замечательная навигация у нас получилась. С виду она достаточно простая, но это не так, красивая анимация и реализация исключительно на CSS3 этому подтверждение. А что вы думаете?

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