RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Авг
24

Делаем вертикальное меню аккордеон

Добрый день уважаемые пользователи и гости блога «Золотой серфер». В сегодняшней статье мы рассмотрим создание вертикального меню — аккордеон с использованием специального jQuery скрипта и стилевого оформления на CSS3. Если Вы еще не сталкивались с таким элементом на сайте, то это обязательно рано или поздно  произойдет. На самом деле, это очень простая и красивая структура содержимого, которая требует небольшого скрипта для функционирования. Аккордеон, как правило, используется для организации дополнительной информации спрятанной в подпункте меню.

Вы можете использовать аккордеон как:

  • меню с выпадающими подпунктами;
  • ответы на вопросы (FAQ страницу) или другим оригинальным способом.

аккордеон

 

demodownload

На самом деле применений можно найти много. Таким образом цель данной статьи рассмотреть создание аккордеона и установки его на сайте. Итак, приступим к созданию аккордеона, который будет работать во всех современных браузерах.

HTML разметка аккордеона

<div id="accordion-js" class="accordion">
<h2>Заголовок 1</h2>
<p>Здесь находится контент...</p>
<h2>Заголовок 2</h2>
<p>Здесь находится контент...</p>
<h2>Заголовок 3</h2>
<div>
<p>Здесь находится контент...</p>
<p>Здесь находится контент...</p>
</div>
</div>

Заголовок h2 будет «кнопкой» для аккордеона. Элемент, на который будет происходит нажатие, и открываться скрытый контент. Вместо h2 может быть любой другой элемент, то есть это может быть параграф p, ссылка, контейнер div или изображение. Я считаю, что это наиболее эффективный способ создания этого типа аккордеона.

h2{
color: #002850;
font-size: 30px;
font-weight: normal;
padding: 45px 0 15px;
cursor:pointer;
}
.accordion {
border: 1px solid #ddd;
border-top: none;
margin: 10px 0;
float: left;
width: 470px;
position: relative;
}
.accordion a {
display: block;
text-decoration: none;
}
.accordion h2, .accordion a{
background-color: #fff;
background-image: url(gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff);
border-top: 1px solid #ddd;
color: #222; font: 14px/30px 'Verdana', sans-serif;
height: 30px; margin: 0; padding: 0; text-indent: 10px;
}
p {
color: #555;
font: 12px/18px 'Verdana', sans-serif;
padding: 20px 10px;
}

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

jQuery скрипт аккордеона

$(document).ready(function(){
$('#accordion-js').find('h2').click(function(){
$(this).next().stop().slideToggle();
}).next().stop().hide();
});

Благодаря селектору находим по id контейнер accordion-js, а в нем элемент h2. Отслеживаем клик по этому элементу и методом .next() выбираем следующий элемент после h2, в нашем случае параграф p, и открываем или скрываем его после второго щелчка.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (1) на “Делаем вертикальное меню аккордеон”

  • CMSONY
    CMSONY (172 коммент.) 13 Февраль 2014 в 20:47

    Для организации контента на сайте функция аккордеона очень полезна, особенно если это ресурс с большим количеством информации. Вот как, например, на этом сайте http://white-sail.ru – очень много вкладок в различном исполнении. Так гораздо удобнее и быстрее, кликнув на одну из вкладок, найти нужную информацию, чем долго прокручивать страницу.

Оставить комментарий


вверх