jQuery navigation menu issue

Question

I have a demo up here so you can look at all the html and javascript involved.

Problem:

The problem I'm having is that at the moment, when you hover over a link (other than home) and then move the mouse anywhere else on the screen (except over the home link) the home link isn't reverting to the white text color.

I tried to resolve the problem by changing the following piece of code (look in the "example.js" file linked to from the page to view full code):

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
}

I added an extra line

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
$(".current_page_item_two a").stop().animate({ color: whitecol },500);
}

This line was intended to set the link inside the current_page_item_two element back to white when no link is hovered over (when the slider returns to the home link).

However, looking at the demo here, you can see that this creates some horrible glitches in the nav (wiggle the mouse about over the links to see what I mean, I end up causing some issue where the white rollover animations don't work at all)

Also, as a side note, why are my callback functions when animating the hover rectangle being called before the animation is complete? I'm new to jquery and I was under the impression that the fourth parameter was a function to be called when the animation was complete.

Thanks!

As a side note, StackOverflow supports Markdown, which formats text without the need of ugly HTML tags and character codes. I reformatted your question to that effect. — pimvdb
– pimvdb, Commented Nov 26, 2011 at 19:30

Carl Sverre · Accepted Answer · 2011-11-29 19:12:02Z

1

Your code is needlessly complex. I refactored what you want to do into a very simple jQuery plugin. If you want I encourage you to look into css3 animations to make it even smaller (although you might want to maintain cross browser compat). The code is still a little more complex than it needs to be, although that is more due to me not having much time at the moment. You can see the solution here:

http://jsfiddle.net/hGm7M/3/

Edit: updated url to add resetting slider to home and changing slider width

If you have any questions feel free to ask.

Notes:

You could move all the css into the jQuery plugin making it a self contained widget
You could separate the slider from the color system, although in this case I am not sure if it's worth it
Right now I don't set the colours in css for simplicity which means browsers without javascript will just get default coloured links. There are a number of solutions to this, but it depends on what you want to do. I tend to prefer the widget style of things, so I would serve a html menu to the client and then replace it with a js widget with all its own styling et all. This way you have graceful degradation, but the code is still simple and strait-forward.

edited Nov 29, 2011 at 19:12

answered Nov 29, 2011 at 19:01

Carl Sverre

1,18810 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carl Sverre Over a year ago

Wait, I just realized I don't have it defaulting back to the home link. Fixing that right now.

nmford Over a year ago

Thanks Carl! You have been extremely useful and in addition to helping me fix my problem I've learned some things in the process.

Carl Sverre Over a year ago

Glad I was able to help! Cheers

Collectives™ on Stack Overflow

jQuery navigation menu issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related