Простейшее меню-гармошка (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');});
ПафНутиЙ написал 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
/ /
Не скажут, а жаль.
Похожие новости:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Все шаблоны совместимы с актуальной версией движка
Последние новости:

Поздравлю всех с Новым 2017 годом!

31-12-2016, 00:24
Поздравлю всех с Новым 2017 Годом! Пусть все Ваши желания обязательно сбудутся и в новом году будет только хорошее настроение! Ну и какой же новый год без подарков?) Представляю БЕСПЛАТНЫЙ шаблон для DLE 11.2 - FanBox (Test-Templates)! Качайте и используйте шаблон на своих сайтах в свое

11.11 Всемирный день распродажи! Успей купить любой шаблон со скидкой 50%! Только сегодня!

11-11-2016, 17:32
Только сегодня! Честная скидка 50% на любой шаблон! Успей затариться на распродаже =) За получением скидки пишите в icq или на почту!
Все новости
Test-Templates Google+

Test-Templates Youtube

Дружественные ресурсы:
Опрос
Купили бы вы версии наших шаблонов под WP?
Да, конечно
Нет, это не нужно
Не готов работать с WP