HTML/JS menu - особенности работы IE/Opera/FF

vitaly · 2008-12-18 03:53:38

Решаю задачу - новый генератор меню для ngcms.
Основные требования:
1. Работа даже при выключенном JS (т.е. все чисто-JS-меню отпадают)
2. Возможность открывать/закрывать ветки меню (при клике на "+" и "-")
3. Выделение текущего активного пункта меню

Получился вполне компактный HTML/JS код, но вот проблема - в FF меню работает отлично.
А вот в других браузерах начинаются проблемы:
IE - для блока span, для которого выставлено display: list-item, почему-то не срабатывает событие onclick при щелчке на мой list-style-image
Opera - вообще не отрабатывает list-style-image

Знатоки HTML, помогите разобраться!
Вот так выглядит предварительный вариант меню:

HTML код меню лежит тут: http://ngcms.ru/test/menu/list.html

vitaly · 2008-12-19 03:15:31

Проблема решена.
В ближайшее время сделаю на базе этого кода новый генератор меню (в виде плагина).

sparco · 2008-12-21 11:31:27

http://destroydrop.com/javascripts/tree/

Кроссбраузерный, бесплатный

vitaly · 2008-12-21 11:40:50

sparco, а ты отключи JScript'ы и посмотри что будет с этим меню (подсказка - ничего не будет, меню вообще не появится).

По условиям задачи меню должно отображаться даже в случае отключения JScript'ов, поэтому оно должно отрисовываться через HTML. И DTree тут не подходит (хотя он мне тоже нравится).

Amarelius · 2009-01-04 19:20:32

vitaly, очень интересно, как решил проблему? Или выложи в SVN покурить...

Amarelius · 2009-01-05 01:14:09

vitaly, я заменил span на img, добавил две строки в скрипт, теперь работает везде...

hot · 2009-02-04 15:58:52

Amarelius пишет:

vitaly, я заменил span на img, добавил две строки в скрипт, теперь работает везде...

Какие строчки ? Поподробнее, plz...

Amarelius · 2009-02-04 18:36:08

Вот, что у меня вышло
http://www.iem.arnit.com.ua/download/tree.rar
Вся проблема в том, что IE не обрабатывает OnClick, по пустому элементу, коим в данном примере
был span, даже если ты в стилях пропишешь фон, элемент, по их мнению, должен содержать хоть что-то.
Поэтому я явно вставил картинку и обрабатываю OnClick по ней.
Немного причесать и можно использовать на сайте

p.s.: В Opera не проверял. IE6, IE7 - все ok. FF - само собой, там всегда все ok.

Изменено Amarelius (2009-02-04 20:11:04)

hot · 2009-02-05 01:40:28

Amarelius пишет:

Вот, что у меня вышло
http://www.iem.arnit.com.ua/download/tree.rar
Вся проблема в том, что IE не обрабатывает OnClick, по пустому элементу, коим в данном примере
был span, даже если ты в стилях пропишешь фон, элемент, по их мнению, должен содержать хоть что-то.
Поэтому я явно вставил картинку и обрабатываю OnClick по ней.
Немного причесать и можно использовать на сайте
p.s.: В Opera не проверял. IE6, IE7 - все ok. FF - само собой, там всегда все ok.

СПАСИБО ! Буду экспериментировать...

panoptus · 2009-02-26 21:08:07

Как прогресс? очень ждем финальную версию

vitaly · 2009-02-26 22:31:47

Ооо... я думал, что никому неинтересно

panoptus · 2009-02-27 00:21:51

vitaly, ага, может кому и не интересно... но у меня если подкатегории не скрывать - листать страницу палец устает

hot · 2009-03-05 18:20:03

А вот как ТАКОЕ реализовать на NG CMS?

Изменено hot (2009-03-05 18:57:41)

panoptus · 2009-03-05 21:01:18

hot, да, кошерная менюшка...

Eterex · 2009-03-09 23:47:32

Amarelius пишет:

Вот, что у меня вышло
http://www.iem.arnit.com.ua/download/tree.rar
p.s.: В Opera не проверял. IE6, IE7 - все ok. FF - само собой, там всегда все ok.

В опере работает. С выключенным яваскриптом, основное меню доступно, подпункты - нет. Ну и ладно - так сойдет.

Вопрос в другом - как можно сделать, чтобы запоминался пункт меню, и не приходилось плюсики по новой каждый раз нажимать?

Имеется в виду вот это:

vitaly пишет:

...
3. Выделение текущего активного пункта меню
...

Изменено Eterex (2009-03-09 23:56:30)

Amarelius · 2009-03-10 00:11:11

Eterex, вариантов несколько:
1. В куки писать ID раскрытых и выбранных пунктов меню, а при перегрузке страницы в onLoad для меню считывать куки, раскрывать и выделять необходимые пункты меню (считаю самым правильным вариантом)
2. Можно передавать туже инфу на сервер при помощи XMLHttpRequest и писать в сессии, при перегрузке страницы передавать её браузеру (более заморочистый, но должен работать при отключенных куках)

Amarelius · 2009-03-10 00:15:43

Eterex пишет:

С выключенным яваскриптом, основное меню доступно, подпункты - нет.

Не проблема, можно легко сделать, чтобы при отключенных скриптах менюшка была полностью раскрыта

Eterex · 2009-03-10 11:33:23

Amarelius пишет:

Eterex, вариантов несколько:
1. В куки писать ID раскрытых и выбранных пунктов меню, а при перегрузке страницы в onLoad для меню считывать куки, раскрывать и выделять необходимые пункты меню (считаю самым правильным вариантом)...
... Не проблема, можно легко сделать, чтобы при отключенных скриптах менюшка была полностью раскрыта...

А что именно и где нужно прописать? Спасибо заранее!

Amarelius · 2009-03-10 13:02:22

Eterex, это надо делать в рамках плагина, ведь присвоение ID для пунктов меню происходит на стороне сервера. Дальнейшая обработка на стороне клиента -- чисто технический вопрос http://www.codenet.ru/webmast/js/Cookies.php

Eterex · 2009-03-10 13:44:21

Amarelius, у меня это меню вынесено вручную, и категориями не является. То есть, ссылки на обычные странички сгруппированы в такую менюшку. Брр... надо учиться излагать мысли яснее, сам не понял чего написал)). В общем, тут можно глянуть alcogu.ru , справа.

Amarelius · 2009-03-10 14:57:26

Eterex, Я понял, она у тебя статическая. Тогда будет время, прикручу к менюшке куки.

Amarelius · 2009-03-10 22:03:29

Eterex, Вот держи http://www.iem.arnit.com.ua/download/tree2.rar
, немного причесал.

Из особенностей:
1. Строка меню не переносится если не помещается в окно
2. При отключенных скриптах, показывает развернутый список
3. При включенных скриптах запоминает раскрытые пользователем пункты меню между сеансами

Обязательно!!! Пунктам меню которые разворачиваются присвоить разные ID (не важно какие, любые)
--------------------------------
Юзай на здоровье

Изменено Amarelius (2009-03-10 22:04:07)

Eterex · 2009-03-10 23:44:22

О, супер. Все работает!!! Тысяча благодарностей Amarelius!!

P.S. отдельное спасибо за оперативность

Изменено Eterex (2009-03-10 23:48:42)

hot · 2009-03-11 00:18:15

Amarelius пишет:

Eterex, это надо делать в рамках плагина, ведь присвоение ID для пунктов меню происходит на стороне сервера. Дальнейшая обработка на стороне клиента -- чисто технический вопрос http://www.codenet.ru/webmast/js/Cookies.php

Спасибо большое за Ваши знания и умения Amarelius, но ни один "помешанный" на безопасности своего
компьютера никогда не позволит своему компу сторонние "куки"- соответсвено схема не работает...

Amarelius · 2009-03-11 00:25:16

hot, помешанные хай каждый раз туцкают по меню
Кстати идентификатор сессий тоже в куках хранится...
wikipedia

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

Изменено Amarelius (2009-03-11 00:32:34)

Next Generation CMS :: Форум поддержки

Объявление

#1 2008-12-18 03:53:38

HTML/JS menu - особенности работы IE/Opera/FF

#2 2008-12-19 03:15:31

Re: HTML/JS menu - особенности работы IE/Opera/FF

#3 2008-12-21 11:31:27

Re: HTML/JS menu - особенности работы IE/Opera/FF

#4 2008-12-21 11:40:50

Re: HTML/JS menu - особенности работы IE/Opera/FF

#5 2009-01-04 19:20:32

Re: HTML/JS menu - особенности работы IE/Opera/FF

#6 2009-01-05 01:14:09

Re: HTML/JS menu - особенности работы IE/Opera/FF

#7 2009-02-04 15:58:52

Re: HTML/JS menu - особенности работы IE/Opera/FF

#8 2009-02-04 18:36:08

Re: HTML/JS menu - особенности работы IE/Opera/FF

#9 2009-02-05 01:40:28

Re: HTML/JS menu - особенности работы IE/Opera/FF

#10 2009-02-26 21:08:07

Re: HTML/JS menu - особенности работы IE/Opera/FF

#11 2009-02-26 22:31:47

Re: HTML/JS menu - особенности работы IE/Opera/FF

#12 2009-02-27 00:21:51

Re: HTML/JS menu - особенности работы IE/Opera/FF

#13 2009-03-05 18:20:03

Re: HTML/JS menu - особенности работы IE/Opera/FF

#14 2009-03-05 21:01:18

Re: HTML/JS menu - особенности работы IE/Opera/FF

#15 2009-03-09 23:47:32

Re: HTML/JS menu - особенности работы IE/Opera/FF

#16 2009-03-10 00:11:11

Re: HTML/JS menu - особенности работы IE/Opera/FF

#17 2009-03-10 00:15:43

Re: HTML/JS menu - особенности работы IE/Opera/FF

#18 2009-03-10 11:33:23

Re: HTML/JS menu - особенности работы IE/Opera/FF

#19 2009-03-10 13:02:22

Re: HTML/JS menu - особенности работы IE/Opera/FF

#20 2009-03-10 13:44:21

Re: HTML/JS menu - особенности работы IE/Opera/FF

#21 2009-03-10 14:57:26

Re: HTML/JS menu - особенности работы IE/Opera/FF

#22 2009-03-10 22:03:29

Re: HTML/JS menu - особенности работы IE/Opera/FF

#23 2009-03-10 23:44:22

Re: HTML/JS menu - особенности работы IE/Opera/FF

#24 2009-03-11 00:18:15

Re: HTML/JS menu - особенности работы IE/Opera/FF

#25 2009-03-11 00:25:16

Re: HTML/JS menu - особенности работы IE/Opera/FF

Подвал раздела