Многоуровневые анимационные меню

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Меню должно быть описано в HTML как структура тегов <menu> и <li>, в CSS как соответствующие стили и классы (см. Типовой CSS-файл VcorpJS)

Анимационные меню работают по клику, поэтому хорошо поддерживаются на устройствах с сенсорным экраном.
Плагин меню НЕ использует основную функцию анимации, у него собственная независимая анимация.

Может работать сколько угодно независимых меню на одной web-странице. каждое меню может содержать до 50 уровней вложенности.

Любое меню легко создаётся в виде HTML-кода с последующей инициализацией функцией .iMenu(), любое меню совершенно корректно удаляется обыкновенной очисткой через .innerHTML или удалением объекта, при этом все ссылки на обработчики и параметры для удаляемого меню удаляются вместе с меню, так как являются его частью (находятся в свойствах HTML-объектов меню).

Браузеры IE любых версий (даже новые), в случае инициализации невидимого меню (например, в скрытом объекте-родителе), могут некорректно провести инициализацию, поэтому нужно следить, чтобы во время вызова функции .iMenu() блок с меню участвовал в рендеринге веб-страницы (display:block и т.д.).

Для возможности использования различных изображений или спрайтов (и других стилей) в тегах <li>, в них вставлены блоки <div>, для которых в качестве примера сделаны 5 различных классов для изображений пунктов и разделов меню .pb_m1 ... .pb_m5 (см. Типовой CSS-файл VcorpJS).
Можно при желании раскрасить тексты как у плагина checkbox или реализовать другие визуальные эффекты.

.sMenu( [ time ] , [ step ] , [ handler ] )

Установка общих парамтров для всех меню на веб-странице.

time - скорость анимации одной операции меню (время в миллисекундах), не менее 100 ( по умолчанию 140 ).

step - скорость анимации для меню (шаг в миллисекундах), не менее 10 ( по умолчанию 20 ).

handler - общая callbak - функция, вызываемая при каждом клике по любому пункту любого меню,
если у меню не указана своя функция. Формат вызова: function( e ); где:

• this - ссылка на пункт меню ( HTML-элемент <li> )
• e - объект event события click

handler может быть текстовой строкой кода (см. правила для callbak - функций).

Функция ничего не возвращает.

VcorpJS.sMenu( 200, 20, myFuncDefault );

.iMenu( node , [ autoCloseItem ] , [ noWrapText ] , [ handler ] )

Инициализирует указанное меню node, меню начинает работать и анимироваться.

node - это ссылка на объект (корневой тег <menu>) или его текстовый id

autoCloseItem - если параметр указан, то авто-сворачивание раскрытых разделов (кроме текущего, пока он не будет "кликаться").

noWrapText - если параметр указан, то обрезка не умещающегося текста в пунктах меню <li>, иначе перенос.
Этот параметр действует только на текст конечных пунктов меню, текст разделов всегда обрезается (если раздел закрыт) и переносится (если раздел раскрыт).
Можно поиграться так же стилями CSS white-space и text-overflow тега <li> и вложенных в него...

handler - это callbak-функция для текущего меню, вызываемая при каждом клике по любому пункту любого меню.
Формат вызова: function( e ); где:

• this - ссылка на пункт меню ( HTML-элемент <li> )
• e - объект event события click

handler может быть текстовой строкой кода (см. правила для callback - функций).

Функция возвращает true, или false если не найден объект меню node или хотя-бы один пункт-тег <li>.

VcorpJS.iMenu( "id_mainMenu", 0, 0, myFunc );

.gMenu( node )

Возвращает сылку на активный пункт (объект <li>) меню node (или undefined).

alert( VcorpJS.gMenu("id_mainMenu") );

Ниже пример HTML-меню и наглядные визуальные примеры его работы после инициализации с разными параметрами.

Стили для всех элементов тестовых меню совпадают со стилями навигационного меню раздела сайта «VcorpJS», но в тексте нет ссылок.

<!--
Пример исходного HTML-кода меню.
Раздел 2 открыт (указан CSS-класс "pb_mo").
-->
<menu id="testMenu">
  <li><div class="pb_m3"></div><span>Первый пункт</span></li>
  <li><div class="pb_m3"></div><span>Второй пункт</span></li>
  <li class="pb_mc"><div class="pb_m2"></div><span>Раздел 1</span>
    <menu>
      <li><div class="pb_m3"></div><span>Первый</span></li>
      <li><div class="pb_m3"></div><span>Второй</span></li>
      <li><div class="pb_m3"></div><span>Третий</span></li>
    </menu>
  </li>
  <li class="pb_mo"><div class="pb_m2"></div><span>Раздел 2</span>
    <menu>
      <li><div class="pb_m3"></div><span>Первый</span></li>
      <li><div class="pb_m3"></div><span>Второй</span></li>
    </menu>
  </li>
  <li class="pb_mc"><div class="pb_m2"></div><span>Раздел 3</span>
    <menu>
      <li><div class="pb_m3"></div><span>Первый</span></li>
    </menu>
  </li>
  <li><div class="pb_m3"></div><span>Последний пункт</span></li>
</menu>

Вариант 1 - инициализация по-умолчанию.

Вариант 2 - инициализация меню с авто-сворачиванием разделов.

Вариант 3 - инициализация меню с переносом строк (по умолчанию).

Вариант 4 - инициализация меню с обрезкой строк.

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.