Небольшой скрипт для создания главного меню(аналог десктопного mainmenu)

Предистория:

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

Описание скрипта:

Скрипт написан на чистом яваскрипте. Элемент меню представляет собой элемент списка 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), и немного подрихтовал вид. Также добавил комментарии в код. Пример там же

25 февраля 2009, 17:17

Tagire –1,2

комментарии (17)

slesar 25 февраля 2009, 17:33 #

А я вот выключил Javascript и меню пропало :(

base1.addElem('Текст элемента меню',SomeFunction); — здесь надо не добавлять новый, а подключать тот, который в HTML уже есть.

Tagire 25 февраля 2009, 17:36 # ↑

Хм, да, без яваскрипта оно не работает. Надо сделать так, чтобы оно раскрывалось без него полностью.
Второе предложение немного не понял.

Tagire 25 февраля 2009, 17:41 # ↑

Хм, я из вашего комментария вынес, что стоить изменить скрипт, чтобы он как-бы из микроформата генерировал меню при подключении. Спасибо за идею)

slesar 25 февраля 2009, 17:54 # ↑

Вот нечто в таком духе:

<ul>
	<li><a href="/">Файл</a></li>
	<li>
		<a href="/">Справка</a>
		<ul>
			<li><a href="/">О программе</a></li>
		</ul>
	</li>
</ul>

А стилями/скриптом все перебрать и повесить события. Причем не желательно запихивать что-то внутрь тега кроме текста.

Tagire 25 февраля 2009, 18:10 # ↑

В принципе отлично. Но я тут вернулся к своей задаче, и вспомнил, что у меня это меню требуется для создания интерфейса для разработки) И там всегда яваскрипт, и важна удобность назначения действий для пунктов меню.

Killy 25 февраля 2009, 17:52 #

На этом сайте меню неплохо смотрится.
Сейчас заглянул в исходники и выяснил: основано оно на этом материале. (пример)

Tagire 25 февраля 2009, 17:56 # ↑

И правда отлично смотрится. Даже как-то жалко время стало свое)

Killy 25 февраля 2009, 18:50 # ↑

Я его в основном из-за внешнего вида решил привести.
Но тот материал довольно старый. В сравнении с Вашим кодом видно, как подходы к реализации одних и тех же вещей меняются со временем.

no_smoking 25 февраля 2009, 18:08 #

не хорошо так делать Создать
li — блочный элемент
a — инлайновый
Инлайновый не должны содержать блочные

Tagire 25 февраля 2009, 18:11 # ↑

Он у меня блочный, хотя я скорее всего список отсюда просто уберу, потому что он не в тему.

malyshev 25 февраля 2009, 18:16 #

1. Конструкция:

<div>
    <a>...</a>
    <ul>
        <a>
            <li><a> ... </a></li>
        </a> 
    </ul>
</div>

ужасна, вставлять в <ul /> — <a /> — а в него <li /> очень не красиво, и не по спецификации.

Почему бы не использовать конструкцию вида:

<ul>
    <li>
        <a>...</a>
        <ul>
            <li>
                <a>...</a>
                ......
            <li>
            ........
        </ul>
    </li>
    ...........
</ul>

2. На практике генерировать меню javascript кодом, как у вас в примере, врят ли потребуется, намного удобнее инициализировать меню, имея XML или JSON структуру, или конструкцию из списков в теле страницы.

Tagire 25 февраля 2009, 18:31 # ↑

1. Спасибо за совет. Так и сделаю.
2. Генерировать для меня удобнее, потому что все равно придется задавать функцию обработчик. Потому что у меня обработчик есть у каждого элемета.

Dangelweb 25 февраля 2009, 18:26 #

а тут круче dhtmlx.com/docs/products/dhtmlxMenu/

–2

Tagire 25 февраля 2009, 18:36 # ↑

По сути у них подогнанно нормально, картинки аяксом подгружаются и клавиатурные сочетания. На самом деле там ничего сложного нет)

Tagire 27 февраля 2009, 00:08 # ↑

Кстати, там двойная лицензия. Так что мне бы только коммерческая версия бы подошла.

НЛО прилетело и опубликовало эту надпись здесь

Tagire 27 февраля 2009, 00:07 #

Добавил исправленную версию.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.