И снова рубрика "зачем плагины, библиотеки - сделай сам". Для реализации обычного вертикального меню аккоредон нам понадобится всего 4 строчки кода на jQuery. Для красивого эффекта слайдинга раскрывания/скрывания пунктов меню нам понадобится jquery функция slideDown/slideUp. Для верной семантичной структуры html кода мы сверстаем меню с помощью ul>li, ведь списки, пункты меню и другие навигационные элементы должны верстаться с помощью ul>li.
Смотреть демо
Поместим в li теги p и div, в p будет пункт меню, в div - содержание/описание пункта меню(раскрывающая часть). Посмотрим html код:
<ul class="akkordeon">
<li>
<p>Несколько активных пунктов</p>
<div>Окраска, особенно в речных долинах, <a href="">обрывисто формирует</a> конус выноса, так как совершенно однозначно указывает на существование и рост в период оформления <b>палеогеновой поверхности выравнивания</b>. Присоединение органического вещества, основываясь большей частью на сейсмических данных, интенсивно поступает в меловой ийолит-уртит, что лишь подтверждает то, что породные отвалы располагаются на склонах.</div>
</li>
<li>
<p>Габбро разогревает основной трог</p>
<div>Габбро разогревает основной трог, за счет чего увеличивается мощность коры под многими хребтами. Эта разница, вероятно, помогает объяснить, почему верховое болото пододвигается под окско-донской кимберлит, но приводит к загрязнению окружающей среды.</div>
</li>
<li>
<p>Калиево-натриевый полевой шпат</p>
<div>Калиево-натриевый полевой шпат обогащает первичный лакколит, что обусловлено не только первичными неровностями эрозионно-тектонического рельефа поверхности кристаллических пород, но и проявлениями долее поздней блоковой тектоники</div>
</li>
<li>
<p>Другим примером региональной компенсации</p>
<div>Другим примером региональной компенсации может служить ламинарное движение анизотропно высвобождает блеск, что свидетельствует о проникновении днепровских льдов в бассейн Дона. Грабен анизотропно смещает фирновый алмаз, в то время как значения максимумов изменяются в широких пределах.</div>
</li>
</ul>
Стилизуем html в стиле вертикального аккордеон меню, выделим пункт меню градиентом и выделим активный пункт отдельным цветом градиента:
<style type="text/css">
ul.akkordeon{
width: 300px;
border: 1px solid rgb(182, 182, 182);
}
ul.akkordeon li > p{
cursor: pointer;
padding: 10px 10px;
margin: 0;
color: white;
text-shadow: 0px 1px 1px rgb(73, 73, 73);
text-align: center;
font-size: 12px;
font-family: sans-serif;
background: #0C0C0C -webkit-gradient(linear, left top, left bottom, from(#868585), to(#666)) no-repeat;
}
ul.akkordeon li > p:hover{
background: #0C0C0C -webkit-gradient(linear, left top, left bottom, from(#868585), to(#4E4B4B)) no-repeat;
}
ul.akkordeon li > p.active{
background: #369 -webkit-gradient(linear, left top, left bottom, from(#86B8E9), to(#5682AE)) no-repeat;
}
ul.akkordeon li > div{
display: none;
padding: 10px;
font-size: 11px;
line-height: 15px;
}
</style>
Код jQuery:
<script type="text/javascript">
$(document).ready(function(){ //страница загрузилась
$('ul.akkordeon li > p').click(function(){ //при клике на пункт меню:
$(this).toggleClass('active'); //делаем данный пункт активным/неактивным
$(this).next('div').slideToggle(200); //раскрываем/скрываем следующий за "кликнутым" p блок div с эффектом slide
});
});
</script>
Есть 2 варианта работы аккордеон меню:
- возможность раскрыть несколько пунктов. Как раз тот код, что выше.
- только 1 активный пункт меню. Раскрыв 1 пункт, остальные пункты скрываются автоматически:
<script type="text/javascript">
$(document).ready(function(){
$('ul.akkordeon1 li > p').click(function(){
if(!$(this).hasClass('active')){ //если "кликнутый" пункт неактивный:
$('ul.akkordeon1 li > p').removeClass('active').next('div').slideUp(); //делаем неактивными все пункты и скрываем все блоки
$(this).addClass('active'); //активируем "кликнутый" пункт
$(this).next('div').slideDown(200); //раскрываем следующий за ним блок с описанием
} else { //иначе:
$(this).removeClass('active').next('div').slideUp(); //скрываем данный пункт
}
});
});
</script>
2 варианта работы аккордеон меню можно посмотреть в демо-примере:
Смотреть демо