jquery - Javascript menu hover issue -
i'm trying edit javascript menu client created previous web developer. i'm not great @ javascript. client has asked make menu expandables expand on rollover instead of on click. so, changed .click .hover , worked great. problem is, when move mouse off main heading actual expandable region of menu, menu fades/disappears away. have feeling has .mouseneter section i'm not sure how proceed. ideas?
function fademenu(el) { var delaymenu = settimeout(function () { $(el).fadeout(300); $(el).prev('.dropdown-toggle').removeclass('dropdown-enabled').animate({ backgroundcolor: 'transparent', color: '#000000' }, 300, function () { $(this).css({ color: '', backgroundcolor: '' }); }); }, 500); el.data('delaymenu', delaymenu); } $(document).ready(function () { $('a.dropdown-toggle').click(function () { var menu = $(this).next('.dropdown-menu'); var link = $(this).parent('li'); var othermenus = $('.dropdown-menu').not(menu); var othertoggles = $('.dropdown-toggle').not($(this)); var toggle = $(this); var tocolor = ''; if ($(menu).is(":visible")) { if ($(link).is(":hover")) { tocolor = '#ff7e00'; } else { tocolor = '#000000'; } $(menu).fadeout(300); $(toggle).removeclass('dropdown- enabled').stop().animate({ backgroundcolor: 'transparent', color: tocolor }, 300, function () { $(this).css({ color: '', backgroundcolor: '' }); }); } else { if ($(othermenus).is(':visible')) { $(othermenus).fadeout(300); } $(toggle).stop().animate({ backgroundcolor: '#1f1f1f', color: '#ffffff' }, 300).addclass('dropdown-enabled'); $(menu).fadein(300); $(othertoggles).stop().animate({ backgroundcolor: 'transparent', color: '#000000' }, 300, function () { $(othertoggles).css({ color: '', backgroundcolor: '' }); }); } return false; }); $('.dropdown-menu').mouseenter(function () { cleartimeout($(this).data('delaymenu')); }).mouseleave(function () { fademenu($(this)); }); $('.dropdown-toggle').mouseenter(function () { cleartimeout($(this).next('.dropdown-menu').data('delaymenu')); }).mouseleave(function () { fademenu($(this).next('.dropdown-menu')); }); });
Comments
Post a Comment