Блог

Хорошо, я создал этот навигатор, у которого есть вспомогательный навигатор в определенных местах. В настоящее время триггер является пунктом главного меню. Однако теперь это отлично работает для всех целей отображения меню. При наведении курсора мыши на пункт главного меню пункт подменю закрывается. Я попытался установить интервал, чтобы дать ему секунду, чтобы поймать случай, когда кто-то, возможно, просматривает элемент подменю, но это само по себе вызывает проблемы, особенно если человек тем временем переходит в другое меню. Я замуровал себя и не могу придумать, как справиться с этим лучше.. итак, вот существующий код:

 var menuTimeout = '';
$('.nav_click').bind({
mouseover: function(){
if($(this).hasClass('submenus') == true){
var whichMenu = $(this).attr('id');
var displayMenu = '';//yes its blank for a reason
if(whichMenu == 'navi2'){displayMenu = 'menu1';}
if(whichMenu == 'navi3'){displayMenu = 'menu2';}
if(whichMenu == 'navi4'){displayMenu = 'menu3';}
if(whichMenu == 'navi5'){displayMenu = 'menu4';}
if(displayMenu != '')
{
var leftOffset = ($(this).position().left-35);
var topOffset = ($(this).offset().top $(this).height() 10);
$('#' displayMenu).css({"display":"block", "position":"absolute", "left":leftOffset "px", "top":topOffset "px"});
}
}
var menuitem = $(this).attr('id');
if(menuitem == "navi1"){$(this).css({"background-position":"0 -63px"});}
if(menuitem == "navi2"){$(this).css({"background-position":"-100px -63px"});}
if(menuitem == "navi3"){$(this).css({"background-position":"-230px -63px"});}
if(menuitem == "navi4"){$(this).css({"background-position":"-420px -63px"});}
if(menuitem == "navi5"){$(this).css({"background-position":"-524px -63px"});}
if(menuitem == "navi6"){$(this).css({"background-position":"-638px -63px"});}
if(menuitem == "navi7"){$(this).css({"background-position":"-737px -63px"});}
},
mouseout: function(){
if($('.submenublock').is(":visible") == true){menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 1500);}
var menuitem = $(this).attr('id');
if(menuitem == "navi1"){$(this).css({"background-position":"0 0"});}
if(menuitem == "navi2"){$(this).css({"background-position":"-100px 0"});}
if(menuitem == "navi3"){$(this).css({"background-position":"-230px 0"});}
if(menuitem == "navi4"){$(this).css({"background-position":"-420px 0"});}
if(menuitem == "navi5"){$(this).css({"background-position":"-524px 0"});}
if(menuitem == "navi6"){$(this).css({"background-position":"-638px 0"});}
if(menuitem == "navi7"){$(this).css({"background-position":"-737px 0"});}
},
click: function(){
window.location = $(this).attr('rel');
}
});
$('.submenublock ul').bind({
mouseover: function(){
clearInterval(menuTimeout);
},
mouseout: function(){
menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 500);
}
}); 
  

и вот сайт, на котором он находится в настоящее время, чтобы увидеть беспорядок в действии.
http://kansasoutlawwrestling.com /

Редактировать

Вот версия для скрипки на JS http://jsfiddle.net/WveqN /

Редактировать 2 Основная причина, по которой я отказываюсь от опции CSS, заключается в том, что происходит несколько событий ввода / вывода курсора мыши из пункта главного меню, которые меняются на другую версию с помощью спрайта в появляющемся меню, если таковое появится.

@ chris, здесь нужно просмотреть много кода без какого-либо HTML для его резервного копирования, поэтому я собираюсь дать вам свой общий ответ.

1. Почему бы не использовать плагин jQuery, который уже предоставляет вам это меню и желаемый эффект?
2. Или попробуйте опубликовать это, код и все остальное, на http://jsfiddle.net чтобы каждый мог поиграть с кодом и найти решение?

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions / — это страница, на которой в качестве примера приведено довольно много бесплатных плагинов для меню.