Главная/ Собираем HTML и CSS приемы/ Javascript: решения и плагины/ Usability/ К нужному пункту выпадющего меню по диагонали

К нужному пункту выпадющего меню по диагонали

Дата публикации: 13.07.2012

Задача

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

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

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

Решение

$(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');
});

});

В живую.

Показать комментарии