RangeRover
New Member
Hi everyone,
I have a client who's site was made by their previous web designer. They are asking me to make the menu, which has expandable dropdowns and is javascript, have the expandable child regions expand on ROLLOVER instead of on CLICK (the current method). I'm not that great with Javascript so I'm having some trouble figuring this out.
Below is the javascript file that the menu references. The red areas are the areas I've changed to achieve my current progress, which is:
- The menu rolls over as I wanted
- However, when you hover over a menu item and the menu expands, the menu will not "go away" anymore. There is always one menu left open after rolling over a menu item at least once. This is a problem because, well, the menu can't just be always open.
The things I've changed are in red: the first .hover used to be .click, and the :click used to be :hover (these are the changes I made to achieve the progress I'm at now).
Any ideas on how to fix this problem?
I have a client who's site was made by their previous web designer. They are asking me to make the menu, which has expandable dropdowns and is javascript, have the expandable child regions expand on ROLLOVER instead of on CLICK (the current method). I'm not that great with Javascript so I'm having some trouble figuring this out.
Below is the javascript file that the menu references. The red areas are the areas I've changed to achieve my current progress, which is:
- The menu rolls over as I wanted
- However, when you hover over a menu item and the menu expands, the menu will not "go away" anymore. There is always one menu left open after rolling over a menu item at least once. This is a problem because, well, the menu can't just be always open.
The things I've changed are in red: the first .hover used to be .click, and the :click used to be :hover (these are the changes I made to achieve the progress I'm at now).
Any ideas on how to fix this problem?
Code:
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').[COLOR="Red"]hover[/COLOR](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(":[COLOR="red"]click[/COLOR]")) {
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'));
});
});
