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

Преимуществом такого аккордеона является то, что в нем выводится количество информации в цифровом обозначении. И так приступим. Для начала мы создадим неупорядоченный список для разметки HTML:

Теперь рассмотрим стили CSS, данный код не является чем-то новым, мы будем использовать градиентную заливку и некоторые правила.

Все достаточно просто, можете в этом сами убедиться:

Для очистки мы будем использовать height, overflow, etc., также для окрытия и закрытия мы будем использовать правила "display: none;”  и “display: block”.

Так как CSS3 поддерживают не все браузеры, мы будем использовать jQuery, еще, данный скрипт, поможет сделать данный аккордеон более привлекательным. Скрип jQuery мы будем подключать с репозитория Google.

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

Эта строчка позволяет открыть первый пункт при загрузке:

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

Данный код позволяет при открытии одной вкладки закрывать другие:

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