Xiper

Диагональ к выпавшему меню

Автор: Евгений Рыжков Дата публикации:

Задача

Дать пользователю возможность переместить курсор по диагонали к пункту выпавшего меню.

переместить курсор по диагонали

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

Решение

$(document).ready(function(){
var nCurPosX; // текущее положение курсора
$('html').mousemove(function(e){
	if(!e) e = window.event;
	nCurPosX = e.clientX;
});
$('.withSubmenu').hover(function(){
	var	$curItem = $(this),
		$submenu = $curItem.find('ol').eq(0);
	$curItem.addClass('hover');
	/*
		делаем задержку чтобы при случайном наведении на пункт под меню не показывалось
	*/
	setTimeout(function() {
		/* если по истечению задержки мы все еще на том же пункт меню,
			значит показываем подменю
		*/
		if($curItem.hasClass('hover'))
		{
			$submenu.css('display', 'block');
		}
						}, 100);
},
function(){
	var nPosXStart = nCurPosX,
		$submenu = $(this).find('ol').eq(0),
		$curItem = $(this);
	$curItem.removeClass(&hover&);
	/*
		делаем небольшую задержку чтобы определить направление движение курсора
	*/
	setTimeout(function() {
		var nPosXEnd = nCurPosX;
		// если в сторону подменю, значит делаем большую задержку для возможности движения по диагонали
		if(nPosXEnd - nPosXStart > 0)
			setTimeout(function() {
				/*
					если по истечению задержки курсор находится на подменю или текущем пункте меню
					тогда не прячем подменю
				*/
				if(!$submenu.hasClass('hover') && !$curItem.hasClass('hover')){
					$submenu
						.css('display', 'none')
						.removeClass('hover');
				}
			}, 300);
		// если нет и мы ушли с текущего пункта меню, моментально скрываем подменю
		else if(!$submenu.hasClass('hover') && !$curItem.hasClass('hover')){
			$submenu
				.css('display', 'none')
				.removeClass('hover');
		}		
	}, 10);
});
$('.submenu').hover(function(){
	$(this).addClass('hover');
							 },
function(){
	$(this).removeClass('hover');
});
});

В живую.