Цветное меню аккордеон на CSS и JQuery | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryЦветное меню аккордеон на CSS и JQuery
Дата: 18.06.2013 в 22:54 | Просмотров: 6601

Цветное меню аккордеон на CSS и JQuery

меню аккордеон css, меню аккордеон для сайта
Скачатьбесплатно с сервера
Демодемонстрация

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

Поэтому, сегодня мы создадим простое, но привлекательное меню аккордеон для сайта, и с помощью JQuery добавим некоторые модные эффекты. Это меню аккордеон css уже имеет авторские стили, но Вы можете легко изменить их и подстроить под свой дизайн и вкус. Также смотрите ещё 3 варианта дизайна аккордеон меню на CSS3.

Прежде чем читать дальше, Вы можете сказать демо-файлы, чтобы понимать о чем идет речь.

Шаг 1 – HTML

Как Вы уже возможно можете увидели из демо-версии, меню аккордеон состоит из четырех разделов, каждый из которых заключен в тег li с классом menu. Все они расположены внутри ul.container и имеют такую общую структуру html кода:

Каждое меню содержит другой ul, который образует область заголовка li.button, а область содержимого li.dropdown.

У нас есть ссылка, расположенная внутри li.button (имеет назначенное имя класса). Эта будет связана с JQuery обработчиком, для создания некоторых эффектов при нажатии.

Стоит также отметить, что элементы выпадающего списка dropdown по умолчанию скрыты с помощью css display:none.

меню аккордеон для сайта

Шаг 2 – CSS

Если меню будет оформлено должным образом, то оно может иметь большую роль в общем виде сайта.

Важно проявлять особую осторожность, чтобы код CSS был продуманным и верным, и хорошо работал в разных браузерах. В нашем случае мы имеем следующие стили:

Выше описаны стили основного списка ul.container, который включает остальные элементы. И наконец, мы определим внешний вид ссылок, которые выступают в качестве названий разделов (заметим, что реальное фоновое изображение еще ​​не определено).

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

меню аккордеон css

Шаг 3 – JQuery

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

Самое первое, мы подключили JQuery библиотеку из CDN Google, которая поможет нам написать компактный и совместимый код. Далее мы включаем плагин ослабление и, наконец, наш собственный файл со скриптом, который подробно описан ниже.

Как вы могли заметить из демо-версии, при открытии какого-то из пунктов меню, присутствует эффект удара, что создает красивый реалистичный вид. Это достигается с помощью JQuery плагина easing. Он предоставляет ряд интересных эффектов, которые помогут оживить дизайн меню.

Теперь давайте начнем написание нашего собственного скрипта.

Сначала мы устанавливаем замедление, которое будет использоваться в эффектах slideUp / slideDown, а затем используем специально созданную функцию события нажатия на ссылку li.button. При нажатии на эту ссылку, мы получаем список li.dropDown и показываем его, скрывая все остальное.

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

После этого, мы используем e.preventDefault(), чтобы браузер не переходил на другую страницу (ведь мы только нажали на ссылку и это нормальное поведение).

На этом создание цветного меню аккордеон на css и jquery завершено! :)

Заключение

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

Если это меню Вам пригодилось – дайте мне знать. Спасибо за внимание!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com
Перевел: Владислав Бондаренко


Добавить комментарий