Простейшее меню-гармошка (accordion menu)

Простейшее меню-гармошка (accordion menu)


Простейшее меню-гармошка на jQuery. Реализация всего в одну строчку.

Рабочий пример меню

Для установки к себе на сайт такого меню, перед тегом </head> добавьте:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('.harmonica-menu h3').click(function(){$(this).next('.harmonica-menu-hidden').slideToggle();$(this).toggleClass('open');});
});
</script>


Необходимый css:

.harmonica-menu a, .harmonica-menu h3 {
    display: block;
    padding: 5px 5px 5px 15px;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
    
.harmonica-menu h3 {
    background: url(../images/level-item.png) left center no-repeat;
}
    
.open {
    background: url(../images/level-item2.png) left center no-repeat !important;
}

.harmonica-menu-hidden {
    display: none;
    padding: 5px 5px 5px 20px;
}
    
.harmonica-menu-hidden a {
    font-weight: normal;
    padding: 5px;
}


ну и две картинки для открытого и закрытого меню: одна, вторая. Не забудьте, что нужен подключенный jQuery.

Вот и все. Простое такое меню. Пользуйтесь на здоровье.

P.S.: чтобы все открытые подменю сворачивались, когда новое открываешь:

$('.harmonica-menu h3').click(function(){$(this).parent().find('.harmonica-menu-hidden').slideUp();$(this).next('.harmonica-menu-hidden').slideToggle();$(this).toggleClass('open');});
35828
16
Комментарии
ПафНутиЙ
6 декабря 2011 00:56
Немного переточил скрипт от Soh Tanaka и получим складывание всех гармошек, если активирована новая))

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.harmonica-menu h3').hide();
$('.harmonica-menu h3:first').addClass('open').next().show(

);
$('.harmonica-menu h3').click(function(){
if( $(this).next().is(':hidden') ) {
$('.harmonica-menu h3').removeClass('open').next().slideUp()
;
;;
$(this).toggleClass('open').next().slideDown(
;
;);
}return false;});
});
</script>


Парсер код жрёт...(((
Алексей
test-templates
6 декабря 2011 01:53
все намного проще)))

$('.harmonica-menu h3').click(function(){$(this).parent().find('.harmonica-menu-hidden�
39;).slideUp();$(this).next('.harmonica-menu-hidden').slideToggle();$(
this).toggleClass('open');});


код жрет)) в новости отписался
ПафНутиЙ
6 декабря 2011 23:29
А если меню разбито на пару блоков? :)
будем делать .parent().parent().parent().parent() ? ))
Просто в моём случаи менно так и было, заказчику требовалось сделать 2 меню по сути в разных местах страницы, а работать должны были как одно.
Алексей
test-templates
7 декабря 2011 00:07
ну под каждый отдельный случай нельзя сделать)) я лишь сделал для примера)
RealPeapl
7 января 2012 00:45
Простите за ламерство! Но как должен выглядеть сам код меню? Просветите пжт. - очень нужно!
Алексей
test-templates
7 января 2012 00:49
Цитата: RealPeapl
Простите за ламерство! Но как должен выглядеть сам код меню? Просветите пжт. - очень нужно!

откройте http://test-templates.com/development/index.html и посмотрите исходный код
RealPeapl
7 января 2012 01:03
ОЙ! что то я протормозил))) Спасибо огромное!

Еще вопросик!
- Куда нужно вставить код, чтобы все открытые подменю сворачивались, когда новое открываешь?
ПафНутиЙ
28 февраля 2012 16:10
Вот сегодня как раз твой скриптик пригодился. Нужно было быстрое, готовое решение.
Спасибо!
TimuR
2 марта 2012 22:05
test-templates, подскажите в чем может быть проблема, один раз срабатывает гармошка, т.е разворачивает меню, при переходе на категорию, меню больше не разворачивается?
Алексей
test-templates
2 марта 2012 22:33
TimuR,
смотреть нужно, может быть вы вызываете скрипт только на главной?
TimuR
2 марта 2012 22:40
Возможно, потому как для категории я создал и указал другой шаблон TPL, т.е есть вероятность, что шаблон давно пора менять или можно как то решить данную проблему?
Алексей
test-templates
2 марта 2012 22:42
проверить, чтобы скрипт был подключен везед, где вы используете меню
TimuR
2 марта 2012 22:46
Спасибо большое за подсказку, сейчас попробую исправить.
H1billy
13 марта 2012 21:43
test-templates,
Подскажите пожалуйста как прикрутить к данной менюшке cookie, чтобы при перезагрузки странички оставалась та категория что была открыта ранее.
Знаю есть плагин jquery.cookie.js а вот каким образом все это сделать без понятия.
Спасибо за внимание.
dicson
30 июля 2012 01:27
P.S.: чтобы все открытые подменю сворачивались, когда новое открываешь:

$('.harmonica-menu h3').click(function(){$(this).parent().find('.harmonica-menu-hidden�
39;).slideUp();$(this).next('.harmonica-menu-hidden').slideToggle();$(
this).toggleClass('open');});


Подскажите куда его вставить, а то не получается закрытие никак.
Спасибо.
dicson
13 августа 2012 00:57
Не скажут, а жаль.
Мы всегда на связи:
Телеграмм
ICQ
Gmail
Yandex
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Телеграмм
ICQ
Gmail
Yandex