Итак пару недель назад начал искать плагин для создания древовидного меню на jQuery и столкнулся с возмутившими меня обстоятельствами.. рекомендованный JQuery.MenuTree.js начал выделывать удивительные трюфеля в фф3 и ие6 уже на меню с двумя одноуровневыми подменю, но их идея мне понравилась и я рискнул написать собственный плагин, который БУДЕТ работать везде..
назвал я его
jTreeMenu.js
а вот собственно и сам код
if (jQuery) (function($) {
$.extend($.fn, {
treeMenu: function(o) {
$(this).find('ul').css({'list-style' : 'none'});
$(this).find('li.parent ul').slideUp(500);
$(this).find('li.parent').removeClass('collapse').removeClass('expand').addClass('collapse').bind("click", sliding);
function sliding()
{
if ($(this).hasClass('collapse'))
{
var obj = $(this).parent();
obj.find('li.parent').removeClass('expand').removeClass('collapse').addClass('collapse');
obj.find('li.parent ul').slideUp(500);
$(this).addClass('expand').removeClass('collapse');
$(this).children('ul').slideDown(500);
}
else
{
$(this).addClass('collapse').removeClass('expand');
$(this).children('ul').slideUp(500);
}
return false;
}
}
});
})(jQuery);
для одноуровневого меню он работает как ништяшные швейцарские часы, но хотелось бы его сделать мультизадачным. опционально сделать возможным изменение скоростей открытия закрытия меня не интересуют.. мне важно доделать код так, чтобы он был рабочим и на двухуровневом меню и на трех и прочее
сейчас плагин работает в совершенстве всегда только на опере в ие даже 8 версии на двухуровневом меню начинаються танцы с бубном, фф не проверял...
начнем?
ЗЫ если кто то уже сделал такой плагин, либо отыскал в просторах кроссбраузерно рабочий плагин, поддерживающий все ие, оперу, фф и прочее(главное чтобы на jQuery), то поделитесь ссылкой... ато может изобретать велосипед не стоит...
<div id="vsl_menu">
<ul>
<li class="parent"><a href="#">Первое подменю</a>
<ul>
<li class="child">Массаж лица</li>
<li class="child">Мезотерапия</li>
<li class="child">Электрофорез</li>
<li class="child">Визаж</li>
</ul>
</li>
<li class="child">меню 1</li>
<li class="child">меню 2</li>
<li class="child">меню 3</li>
<li class="parent"><a href="#">Второе подменю</a>
<ul>
<li class="child">Обертывание</li>
<li class="child">Ручная методика</li>
<li class="child">Аппаратная метдика</li>
</ul>
</li>
<li class="child">меню 1</li>
<li class="child">меню 1</li>
<li class="child">меню 1</li>
<li class="child">меню 1</li>
<li class="child">меню 1</li>
</ul>
</div>
проверить работу можно на этом меню
не забываем подключать сам jQuery
для активации на реади ставим:
$('#vsl_menu').treeMenu();