Предистория:
На данный момент, я занимаюсь разработкой небольшого сервиса для разработки диаграмм. Вчера вечером я занимался проектированием интерфейса, и подумал, что неплохо было бы на сайте иметь что-то типа главного меню десктопных приложений. Внезапно у меня приоткрылась программистская чакра, и мои руки до кончиков пальцев наполнил программистский энтузиазм. Результатом этого энтузиазма является скрипт главного меню, который я хочу вам представить.
Описание скрипта:
Скрипт написан на чистом яваскрипте. Элемент меню представляет собой элемент списка li обернутый в тег a, внутри элемента могут быть любые теги. Каждое подменю является отдельным ненумерованным списком. Базовые элементы(которые мы видим в нераскрытом состоянии) являются тегом с установленным float:left и блочным режимом отображения.
Элемент меню создаеся так:
Menu = new menuObject();Базовый элемент добавляется так:
base1 = Menu.addParentMenu('Название базового элемента');Элемент меню добавляется так:
base1.addElem('Текст элемента меню',SomeFunction); //SomeFunction назначается обработчиком события onclick элемента. Сам dom элемент хранится в свойстве element.
Задать какие-то особые свойства элемента можно сохранив его в переменную:
elem1 = base1.addElem('Текст элемента меню',SomeFunction);
elem1.element.id = "MenuE1";Или простой сцепкой:
base1.addElem('Текст элемента меню',SomeFunction).element.id = "MenuE1";Разделитель добавляется так:
base1.addBreak();Естественно, отображение можно менять через css.
Аархив с примером, библиотекой, и css.
Пример использования.
Выложил исправленную версию
Наладил совместимость с ie6, немного исправил структуру(но списки просто складируются в body, так сделанно для совместимости с ie6), и немного подрихтовал вид. Также добавил комментарии в код. Пример там же
