Парочка аккордеонов
Несколько вариантов реализации меню-аккордеона с использованием библиотеки Prototype
Недавно в одном из проектов появилась необходимость использовать аккордеон (подобный используемому на Desert Ridge Marketplace). Любят заказчики дешевые эффекты, ничего здесь не поделаешь Чем мне не понравился аккордеон на Desert Ridge — это полной зависимостью от JavaScript: если JavaScript выключен, навигация по сайту переставала работать. Это мне не понравилось, и я решил написать свой. Представляю два решения: [...]
← Вернуться к полной версии записи «Парочка аккордеонов»…
Автор: Vladimir; опубликовано в: CSS, JavaScript; метки: CSS, JavaScript, Prototype, Scriptaculous, WCAG, XHTML, аккордеон13
Апр
2008
Апр
2008
Комментарии к статье «Парочка аккордеонов» (22) »
Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.
Оставить комментарий к записи «Парочка аккордеонов»
गते गते पारगते पारसंगते बोधि स्वाहा
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Забыл сказать: код (для любого из примера) должен находиться внутри функции, вызываемой либо по событию
onload, либо (более предпочтительный вариант) по событиюDOMContentLoaded.С использованием Prototype это будет выглядеть следующим образом:
или
[...] статье “парочка аккордеонов” я рассказывал, как сделать простой аккордеон с [...]
вариант второй “развернуто не более одного меню” можно развернуть все!!!
если дважды кликнуть по одному из меню, а затем кликать на соседнее. это лечится?
Лечится. Можно использовать, например, очереди эффектов
new Effect.BlindUp(c.toggleClassName('collapsed').toggleClassName('expanded'), { queue : { position: 'end', scope : 'accordion' } });и
new Effect.BlindDown(ul.toggleClassName('collapsed').toggleClassName('expanded'), { queue : { position: 'end', scope : 'accordion' } });Да, действительно с очередями эффектов данная проблема не наблюдается. И эффектней смотрится! Здорово! Владимир, Спасибо.
Привет! а можно этот код использовать под bbpress?
если да, то куда влеписть? в какой файл? =)
Заранее спасибо!
Можно.
Не знаю, зависит от темы.
тема стандартная)
“Какумею”. =)
что у меня не работает первый вариант.
код такой же как в примере.
висит менюшка и все. ява поключилась, стили тоже. что проверить?
строки из сомментария Vladimir
Апрель 13, 2008 в 21:31 – тоже не забыл. но что с ними что без них – не работает.
Дайте, пожалуйста, ссылку на тестовую страницу.
Владимир, спасибо за варианты меню.Вроде как все работает)
ЗЫ вот чем интенсивнее изучаю что-то новое, тем больше чувствую себя ламером((
А вопрос можно? Сколько времени и сделанных проектов нужно для превращения из новичка в гуру?))
Терпение и труд всё перетрут.
Главное — желание учиться, опыт и профессионализм дело наживное. Я программированием в разных его ипостасях около 20 лет занимаюсь.
Владимир, спасибо за ваш “аккордеон”, очень помог в решении проблем с ИЕ6, но есть недочет, который я прошу исправить. Данный скрипт не раздает классы основному меню, т.е.
. В примере можно заметить, что красный элемент списка, таким и остается, а не передается другому активному элементу.Виталий, так и было задумано. Красный цвет — это признак того, что данное меню было активно при загрузке страницы. Как в навигации: жирным обычно выделяется текущая страница. Так и здесь.
Владимир, а не подскажете – куда копать чтобы по клику по первому уровню раскрывался список + открывалась целевая страница? Спасибо!
Евгений, тут будет проще вообще все на сервере сделать: для того, чтобы открылась ссылка, JavaScript, ясен пень, не нужен, а на стороне сервера смотреть, какая страница открывается и рисовать соответствующее подменю открытым.
Либо, если Вы вдруг делаете все через фреймы, добавить всем тэгам
.Добрый день! установил я Ваше меню, выглядит красиво, но есть проблема.
Когда я перехожу на страницу, аналог любого SubItem в примере, я не могу потом перейти на другой пункт меню, который не содержит подпунктов SubItem.
К примеру, есть у меня первая строка меню Главная, потом пошло само меню. И вот при клике на Главная у меня меню сворачивается, но переход не осуществляется.
я так понял оно принимает мою строку Главная аналогично другой строке Item, а как мне решишить эту проблемку?
пробовал делать в разных дивах, эффект тот же, оно как-то наследуется.
Артём, если можно — дайте ссылку на тестовую страницу, я посмотрю и скажу, что и где исправить.
Vladimir, спасибо, я решил свою проблемку! можете даже не публиковать мои комментарии! все равно спасибо и за меню, и за помощь!
сайт http://foodtek.com.ua, посмотрите, пожалуйста, и спасибо за оперативный ответ!
Например, так:
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
var a = e.findElement('a');
if (a.readAttribute('href') != '#') {
e.stop();
}
var ul = a.up('li').down('ul');
if (ul) {
if (ul.hasClassName('collapsed')) {
var c = $$('#accordion ul:not([class="collapsed"])')[0];
if (c) {
new Effect.BlindUp(c.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
new Effect.BlindDown(ul.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
);
Если у элемента
aатрибутhrefустановлен в#, элемент будет открываться/закрываться. Еслиhrefкакой-либо другой, будет осуществляться переход.Спасибо большое за простое и удобное меню!