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

Рассмотрев меню, можно заметить что оно состоит из четверых раздвижных частей, каждая из которых определена с помощью элемента LI с классом menu. Они позиционированы внутри главного неупорядоченного списка ul.container.

Создаем HTML разметку:

Рассмотрим элементы LI, они содержат UL, который формирует площадь для названия (li.button) и площадь для контента (li.dropdown). Стоит упомянуть, что элементы списка dropdown спрятаны по умолчанию с помощью свойства CSS display:none.

Далее оформляем стили CSS:

Затем подключаем эффекты jQuery:

Мы раньше уже говорили о создании меню с данным эффектом. Это достигается с помощью плагина easing.

Для начала мы задаем метод для плагина easing, который будет использоваться для эффектов slideUp/slideDown. А так же привязываем функцию к кнопке, которая будет запускать процесс при нажатии. Еще мы используем функцию e.preventDefault() , чтобы браузер не переходил на другую страницу после клика.

На главную