Нужно решение. Появляющийся и исчезающий блок?

Question

[tim_tairan]

Очень срочно нужен совет. Задача следующая есть у меня меню отдельным блоком (блок 1). А выпадающий отдельным блоком (блок 2). Так вот суть задачи таковая при наведении на "блок 1" должен появляться "блок 2" и при этом пока мы водим по "блок 2" что бы он не исчезал.
clip2net.com/s/3nLkQu7
Наглядный принцип работы можно посмотреть тут при наведение на каталог товаров появляется меню. Нужно так же.
vitebsk.biz
Куда хоть копать?)

Answer 1

[Григорий]

JS: onmouseover, onmouseout

Comments

[tim_tairan]

Да я так в принципе и делал. Но когда я убираю курсор с блок 1 исчезает блок 2. Вот как их объединить в единый элемент?

[Григорий]

Отслеживать выход за пределы обоих блоков... как то я делал такую весчь... поищу...

[tim_tairan]

Буду весьма признателен.

[Григорий]

tim_tairan: Делал на jQuery менюшку для Joomla шаблона.

jQuery('.nav-child').css('display','none'); // вложенную менюшку скрываем
	jQuery('.parent').mouseover(function(){ // при наведении на корневую менюшку...
	    var l=jQuery(this).children('ul');
	    l.css('display','block').css('position','absolute'); // вложенную показываем
	    l.mouseout(function(){l.css('display','none');}); // при выходе мышки с вложенной скрываем её
	    jQuery('.parent').mouseout(function(){l.css('display','none');}); // при выходе с корневой вложенную скрываем
	});
        jQuery('.nav li').each(function(){ // для каждого пункта корневого и вложенного меню
            var t=jQuery(this);
            t.click(function(){ // при клике
                jQuery(this).parent().parent().removeAttr('onclick'); // отменяем обработку события "click"
            });
            t.attr('onclick',"window.location='"+t.children('a').attr('href')+"'"); // и задаем на это событие новую задачу
        });

Здесь суть в том, что вложенная менюшка, в коде, размещается внутри корневой, поэтому вложенная является частью корневой меню, и пока мышь над ней, она не пропадает. Главное сделать так, чтобы вложенная наезжала хотябы на 1px на корневую менюшку, чтобы промежуток не вызывал обработку события mouseout.
Не знаю как это сделать в нативном JS, но главное понять принцип, тогда на любом скрипте можно сделать.

[tim_tairan]

Григорий: Спасибо за наводку будем пробовать ковырять.

Answer 2

[Денис Богданов]

Для того, чтобы обеспечить то, чтобы при ведении по блоку 2 он не исчезал, нужно в html блок 2 разместить внутри блока 1.

Comments

[tim_tairan]

А вот тут другая проблема. Блок 1 имеет свою ширину. А блок 2 имеет ширину 100%. Т.е. выпадающее меню на всю ширину. И вот в примере они не внутри друг друга.

[Кирилл Туровников]

tim_tairan: Если блок 1, не relative, то блок 2 можно задать absolute, с сохранением вложенности

[tim_tairan]

Блок 1 relativ + вёрстаю адаптив.

Answer 3

[Максим]

Используем в свойствах блока 1 селекторы :hover, :active для вложенного блока 2