Closed

Javascript Navigation Menu

This project was awarded to jDevAndDesign for $50 USD.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
11
Project Description

I have inherited a website and have been requested to change a navigation menu. The issue with the menu is that when a user hovers over a selection and wants to select a submenu item, they sometimes catch the edge of an adjacent parent item. This instantly changes the submenu selection. I would like to add a delay or someother type of logic so that the submenu does not change unless there is clear inention of selection. I have already looked at hoverIntent and this looks like exactly what I need. However, the menu appears to use "mouseenter" and "mouseleave" rather than hover. I am a complete n00b and have zero clue how to get this working. Below is the code, and you can see the menu in action here; [url removed, login to view]

// main sub menu effect

jQuery(".nav > li").not(".nav ul li").bind('mouseenter',function(){

var submenu = jQuery(this).find( '.sub' );

if(jQuery('#content').css('margin-top')!='10px' && jQuery('#content').css('margin-top')!='0px'){

// fast transition

jQuery('#content').clearQueue();

jQuery('#content').stop();

jQuery('#content').css('margin-top','265px');

jQuery('.nav li .sub').clearQueue();

jQuery('.nav li .sub').stop();

jQuery('.nav li .sub').hide();

jQuery(submenu).show();

}else{

//normal transition

jQuery('#content').clearQueue();

jQuery('#content').stop();

jQuery('.nav li .sub').clearQueue();

jQuery('.nav li .sub').stop();

jQuery('.nav li .sub').slideUp(500);

jQuery('#content').animate({'margin-top':'10px'},500,function(){

jQuery(submenu).slideDown(500);

jQuery('#content').animate({'margin-top':'265px'},500);

});

}

});

jQuery(".nav > li").not(".nav ul li").bind('mouseleave',function(){

jQuery('#content').clearQueue();

jQuery('#content').stop();

jQuery('.nav li .sub').clearQueue();

jQuery('.nav li .sub').stop();

jQuery('.nav li .sub').delay(500).slideUp(500);

jQuery('#content').delay(500).animate({'margin-top':'10px'},500,function(){

jQuery('.nav li .sub').removeAttr('style');

});

});

Awarded to:
Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online