HTML+CSS+JavaScript

вобщем сделал менюшку:
http://www.marieltr.ru/_sancho/artcl/

(точно работает в MSIE, в других браузерах могут быть проблеммы, я не проверял еще)
вобщем суть вопроса: когда выпадает подменю выделение в нем происходит только когда наводишь указатель на текст (по сути получаеться на ячейку <LI>). как сделать чбом "чувствительная зона" была на всю длину, а не только в районе текста?

блин не в тот раздел случайно... извените....

А красиво получилось, очень красиво :) Со вкусом, так сказать. ЗЫ: В Фаерфоксе вообще не функционирует, в Опере собственно тоже.

для этого надо ссылку растянуть до ширины ячейки - style="width: 100;"

а почему подменю выпадает (первый раз) только по клику, а потом и по наведению?
так и задумано? немного непонятно, что надо кликать на меню, надо бы сразу сделать
по наведению. в FF не работает.

>для этого надо ссылку растянуть до ширины ячейки - style="width: 100;"
помогает. но дает, несколько не тот результат. Вся ячейка будет умещятся в данном случае в 100px. Мне нужно чтобы не было переноса слов. т.е. ширина блока должна быть чуть больше самой длинной ячейки.

а выпадать оно должно как у практически любого приложения винды (у того же IE). Единственное чего не могу добиться это чтоб при нажатии вне всего меню, подменю скрылось. Как это сделать?

решил передлать все через стили (behavior). хоть и бьет по работоспсобности в других браузерах. но будет более аккуратным.

Вот это я понимаю - правильное задавание вопроса : ) Буду приводить в пример тем, которые спрашивают: как _З_делать меню, потом: напишите пример, а сами - ни строчки кода и не знают, что такое event. :)

Растяжку так можно сделать, но будут просветы в 3-4 пикс. между строчками. Я бы перевёл всё меню на таблицы, у них лучше контролируется всё - и бордюр, и поля.

Единственное, чего не могу добиться, это чтоб при нажатии вне всего меню подменю скрылось. Как это сделать?
---
Надо сделать перехватчик события на документе, в котором, если источник (target или srcElement) - не меню, выполняется закрытие меню. Тогда скроется не только при нажатии главного меню, но и на любом другом месте документа.

document.onclick=function(){if(event.srcElement.tagТame!='LI' && ....){закрыть меню;};}

Насчёт совместимости с FF и другими - конечно, допустим такой метод, когда пишется всё для 1 браузера, потом дописывается совместимость. В общем, её несложно будет добиться, обращаясь к правильным свойствам событий.

советую воспользоваться klayers. не будет проблем с другими броузерами. в примерах есть и выпадающее меню:

http://kruglov.ru/klayers/examples/drop_menu.html

я на основе klayers сделала вертикальное трехуровневое меню, которое строится динамически из базы:

http://ela.f2o.org/works/tsompos/test_menu_kl.php

это единственный скрипт, с которым не было проблем ни при работе с базой ни при просмотре в разных броузерах.

12345:

Спасибо, со скрытием разобрался... пробовал и раньше такой способ, но тогда тупанул - написал onClick (вместо onclick), и у меня естественно ничего не сработало.. Про вариант с таблицами знаю, но смысл - максимально упростить html код.. а таблицы создадут нагромождение.. Как можно еще сделать чтоб чувсвительной к действию была вся ячейка, а не только зона текста?

elenaki:

Спасибо за вариант, но хочеться самому все таки сделать (ксатит это по сути мое первое более менее серьезное творение на JS, поэтому хочеться довести до ума).


Хотелось бы уточнить еще кое что. В случае с использованием behavior отпадает необходимость прописывать в каждом тэге onClick, onMouseOver и т.д. можно ли обойтись без behavior и в тоже время разгрузить html код от повторяющихся команд... прописать все события в JS коде?

http://marieltr.ru/_sancho/artcl/

Попробуйте не Li, а Div, но Table самое подходящее.
Что Вы понимаете под behavior ?

Блин, неужли придеться сдаться таблицам........ а насчет behavior....... в данный момент у меня конструкция html код примерно следующая:

<ul id="navbar">     <li name="tsmenu1" onmouseover="onCellOver()" onMouseOut="onCellOut()"         onMouseDown="cSubBlock()">Document</li>     <li name="tsmenu3" onmouseover="onCellOver()" onMouseOut="onCellOut()"         onMouseDown="cSubBlock()">Adittional</li>     <li name="tsmenu4" onmouseover="onCellOver()" onMouseOut="onCellOut()"         onMouseDown="cSubBlock()">Help</li> </ul>

но можно сделать по другому..
в css написать:

ul#navbar {    behavior: url(script.htc);    ....... }

все происходящие события прописываються в файле script.htc. При этом html код будет выгдлядеть гораздо удобней и проще:

<ul id="navbar">     <li name="tsmenu1">Document</li>     <li name="tsmenu3">Adittional</li>     <li name="tsmenu4">Help</li> </ul>

но насколько я знаю такое работает только в MSIE .... жаль а то очень удобно.. Так вот хотелось бы все события описать в JS скрипте чтоб не забивать html код.. реально?

Это возможно сделать без behavior, если перехватывать события на документе (document.onclick=function(e){ ... } ) и реагировать на те, которые произошли от LI или от тегов указанного вами класса. Это кроссбраузерно, если анализировать источник прерывания так:

FF=navigator.appName=="Netscape"; /*isGecko*/ document.onclick=function(e){ if(!e)e=event;  srcEl=FF?e.target:e.srcElement;     if(srcEl.tagName!='LI')return;     if(srcEl.className!='menu2')return; ... }

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

на элементе делать перехват так?:

document.getElementById('navbar').onclick = ....

и еще, как при наведении на TD определить класс и id соответствующего TABLE?

Добавлено позже:

document.getElementById('navbar').onmousedown = function() { cSubBlock(); }

такое будет работать везде?

Добавлено еще позже:

Вобщем вот что получилось: сделал отлов нескольких главных событий.. разобрался понял. Но тут новая козява вылезла. я написал:

document.getElementById('navbar').onmousedown = function() { cSubBlock(); }

т.е. я обратился к ul блоку с указаным id , все работает правильно, но при наведении мышки левее или правее кнопок выделяеться вся строка... я так понимаю это растянулся тег ul. вот html код:

<ul id="navbar">    <li name="tsmenu1">Document</li>    <li name="tsmenu3">Adittional</li>    <li name="tsmenu4">Help</li> </ul>

как тут сделать... ловить события на элеиентах LI или как-то вписать размер UL чтоб он не был больше ширины ячеек..
Если кто не понял.. пример - ссылка приведенная в предыдущих сообщениях.

Тут эксперимент покажет, как лучше. А про перехват на элементе почитайте док. Мозиллы , там есть особенности, а вообще перехватывать должно.

вобщем смотрите что получилось:
http://www.marieltr.ru/_sancho/artcl/
Даже некоторые кнопки там задйствованы. Прада думаю что можно еще по компактней написать...

пож. прогоните в разных браузерах.. а то у меня нет такой возможности

в FF не работает. ни по клику ни по наведению ничего не открывается...
а klayers - работает! xuxuxu

щас начал разбираться почему не работает в опере... выяснил что не определяеться атрибут name у тэга LI... получаю его так (для оперы) window.event.target.name . Я парвильно делаю?

Это для Мозиллы так. Атрибут name относится к формам, в других тегах им лучше не пользоваться, вместо него id.

Для кроссбраузерного перехвата событий я такой код использую:

d=document; Ev='if(!e)e=event;';    d.onclick=function(e){eval(Ev); ... ( обращаться к event через e) }      //--для кроссбраузерного доступа к событию в обработчике события

и далее

FF=navigator.appName=="Netscape"; /*isGecko*/ Src=FF?e.target:e.srcElement;

Опера попадает в "не-Гекко".

а почему лучше не пользоваться.. я не могу создать "свои" атрибуты?.. в данном случае id не очень удобно использовать... я тут поковырялся и значение атрибута name получил так: getAtribute('name'). по крайней мере в опере прокатило. до этого в ней вобще никаких реакций небыло).

Так - да, но где-то слышал, что как раз setAttribute в IE глючат. Поэтому лучше пользоваться частоупотребляемыми методами.

вобщем внес изменеия.. тепеь вроде более менее работает и в опере и в нетскейпе...

вопрос по нетскейпу. при выделении ячейки она выделяетсья, но как только курсор попадает на текст в ячейке код выполняеться так будто курсор покинул ячейку. как это профиксить?

Делаешь задержку на onmouseout (vv=setTimeout()), которая отменяется (clearTimeout(vv);) при onmouseover на тексте.

опять внес изменения.. проверял в IE6.0, Opera 8.5 - работает кка по маслу... в Netscape полной отдачи так и не добился но основные функции работают нормально (к нетскейпу я еще вернусь). Хотелось бы услышать отзывы о работе в других браузерах.... (To Elenaki: в частности в FF :)) ).

у меня дома его нет (зачем мне всякая гадость на домашнем...),
в понедельник на работе проверю :)
а завтра Рождество, индейка, шампанское и все такое :)

В FF работает всё, кроме отключения меню при клике на пустом документе.

ну вот, elenaki! я обошелся и без klayers (кстати до конца так и не понял что сие озночает, можетя чего-то упустил...). А проблему, которую указал 12345 постараюсь решить как только поставлю себе FF.

Спасибо всем за помощь!))))