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

 

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

Шаг 1. HTML

Для начала нам необходимо создать расширение меню из обычного HTML списка:

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

Шаг 2. CSS

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

Далее мы добавляем отображение и анимацию кнопки бургера для навигации:

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

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

Шаг 3. JS

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

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

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