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

 

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

Шаг 1. HTML

У нас будет класс mainmenu, в котором будет заключена вся структура навигации, затем мы создаем 2-х уровневое меню аккордеон с неупорядоченным списком.

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

Шаг 2. CSS

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

Теперь добавляем стили для подменю нашей навигации, вот что мы имеем:

Шаг 3. JS

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

Чтобы активировать наш аккордеон и сделать его рабочим, устанавливаем следующие функции JavaScript:

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

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

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