И снова рубрика "зачем плагины, библиотеки - сделай сам". Для реализации обычного вертикального меню аккоредон нам понадобится всего 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 варианта работы аккордеон меню можно посмотреть в демо-примере:
