jquery animated menu (image reposition/fade)

[gromfy]

Hi, all. Long time listener, first time caller. I’m a cut/paste/mimic weekender, and am fairly new to jquery. I’m looking for some expert help. Here’s a demo page with the concept: http://aintyomamasblog.com/dev/jquery-nav/ (zipped demo package: http://aintyomamasblog.com/dev/jquery-nav/jquery-nav.zip)

As you can see, this is an image-based WordPress navigation system with each menu item hanging from a string. The selected item (.current-menu-item) hangs lower than the others. That worked fine with image sprites/CSS, but I wanted to get fancy and add jquery to have the items animate as they move up/down on hover. I got it to work, but am running into a few issues. I’m hoping an expert can help:

(1) The first time an item is hovered, it scrolls through the whole image before re-positioning properly. Can that be avoided?

(2) The .current-menu-item class seems to get over-ridden by the main class after hovering. In this case, you can see that home starts out lower, but, after hovering, goes back to the height of the original images (until refreshing). Is there a more elegant/effective way to deal with the sub-class?

Now, in the don’t-push-your-luck category:

For the selected item, it doesn’t make sense to have it move up/down (since it’s selected). I thought I’d have it stay stationary (over-riding the main class’ animation) but fade to black/white. I embedded into the demo a section from another tutorial on fading. It works, but I couldn’t figure out how to apply that to a sub-class — see (2).

I know there a lot here. I pushed this as far as I could before reaching out. Any help appreciated! Thanks.

[gromfy]

UPDATE: I never knew about jsfiddle. That makes this a lot easier. Here you go:

http://jsfiddle.net/mFpN2/

[gromfy]

FURTHER UPDATE: Using a slightly different technique, I solved most of my issues. Here’s the fiddle: http://jsfiddle.net/eCwfU/42/

In this example, “About” has been assigned an extra class (“current-menu-item”), which allows it to (1) hang lower to show that it is “active” and (2) react differently on hover with the subtle 3px nudge.

I would like to darken or convert to gray scale that active menu item when it is hovered (to show — hey, you can’t really pick this…you’re already there). I’ve seen a couple image fade techniques using different background positions (and the sprite I’m using does have a grayscale version — background-position: 0 -279px; ). But with all my fiddling, I have not been able to add to this otherwise working version the fade effect. Any help appreciated.

[jamygolden]

If I had to do that, (in JS) I would animate the objects instead of animating the CSS properties. But I would probably just use the CSS3 transition property on the background position. It wouldn’t animate in IE, but it would look fine (the items would jump down on hover instead of slide down).

You’re forced to use a lot of javascript because you’re animating the CSS on each item. It would be much more efficient to use one JS function to affect them all properly.

[gromfy]

Thank you for the response. I contemplated CSS3, but wanted cross browser support. At least for the animation. I suppose I would settle for non-IE support on the fading.

As for the multiple classes and heavy amount of JS, you’re right. The problem is that each of the images has a different horizontal position. Although the vertical offset is a fixed amount for each of the sprite images, I didn’t think I could use one function because of the horizontal differences. Can I?

[jamygolden]

Why don’t you set the backgrounds via css and instead of changing the background position to give it the effect, you could physically move the items up and down and have overflow: hidden set to the parent.

this would allow you to do something like

$('#menu-main').children().hover(function(){

$(this).animate({top: '0'});

}, function(){

$(this).animate({top: '-50px'});;

});

Each of them are doing the same movements, so they should use the same functions.

I try to keep CSS out of the javascript as much as possible.

[gromfy]

Well that would be MUCH better. I just messed with it a bit, but it’s not taking. I’m sure I’m just doing something silly wrong. Here’s the test fiddle: http://jsfiddle.net/2RqmU/1/

The hover effect you’re seeing (black/white) is the fall-back (non-JS) hover.

Thanks for the help. I really appreciate it!

[jamygolden]

I removed the unnecessary things in the HTML – Just merge this with your index.html file.
http://jsfiddle.net/2RqmU/3/

The hover states, with the greyed background, isn’t done yet.

But other than that, I think it’s far more simple!

[gromfy]

Wow! That’s so much cleaner. Thank you so much!

I updated the fiddle (http://jsfiddle.net/2RqmU/4/) to include stops, duration, and the selected item “nudge” (for the .current-menu-item class). This all seems great with jquery loading.

But it doesn’t deprecate nicely. If I un-rem the a:hover classes from CSS it will nicely deprecate by showing gray hovers. But if I leave it un-remmed and turn jquery back on, I get a mix — animation and hovers turning gray. I’d like to avoid that. Any thoughts on that?

Thanks again!

[jamygolden]

So you only want it to go grey if javascript is disabled?

[gromfy]

In the face of your generosity, I at least owe you something clearer than I wrote above. Sorry. Here’s what I was hoping ideally would happen with js enabled/disabled compared against the current fiddle (http://jsfiddle.net/2RqmU/4/).

JS ENABLED:
– all of the non-.current-menu-item links hang high and move down on hover, with callback (DONE)
– the .current-menu-item link hangs lower and nudges a few px on hover, with callback (DONE)
– the .current-menu-item link does something else to indicate that clicking it will do nothing (I envisioned destaurating to greyscale, but haven’t been able to execute to decide just how (NOT DONE)

JS DISABLED
– same initial positioning as above (inactive links high, active link low), but with some hover indication that each is a live link; I thought a basic greyscaled hover; the sprite already has grey versions of each image (http://aintyomamasblog.com/dev/jquery-nav/images/menu-sprite3.png)

---

I can’t tell you what a tremendous help you’ve been. As you saw from my first code, I know just enough to get myself in trouble. I’m learning a ton through this. Thanks!

[jamygolden]

It’s my pleasure :) Glad I can help.

I’ve created a new version. You will notice that if you turn off javascript, it works properly: http://jsfiddle.net/2RqmU/5/

You will also see what I’ve done. Basically the javascript removes the class. You can therefore use that class as anchor for browsers with disabled JS. I attach modernizr to pretty much every project I do and it does this by default.

I also minimized the CSS a bit more. Remember, try to use the least amount of selectors you can. If ‘#nav a’ does the job, no need to go ‘#nav ul li a’

Also

div{display: block; height: 100px; width: 100px;}

.one{background: red;}

.two{background: blue;}

.three{background: four;}

is more efficient than:

.one{background: red; display: block; height: 100px; width: 100px;}

.two{background: blue; display: block; height: 100px; width: 100px;}

.three{background: four; display: block; height: 100px; width: 100px;}

[gromfy]

Thank you, thank you, thank you. Both for helping with the code, but also for pointing out the inefficiency. That helps me tremendously.

With and without JS enabled, with some easing effects, and with everything else dialed in, here it is: http://jsfiddle.net/2RqmU/9/ I’ll migrate it into WordPress tonight.

The *only* think I noticed that was *slightly* off here was that the “nudging” for .current-menu-item works differently for about/faves/contacts than it does for home. Home is more abrupt, as thought it’s moving dramatically at first (like some positioning is off). It’s a small difference, but one I can’t figure out. It really only matters since “home” is the one that will most often be selected.

Thanks again! (Where’s that “buy a beer” button in the forum….?)

[jamygolden]

No problem! Glad you learnt something. There is no buy my a beer haha! But thanks ;)

Yeah, it’s slighty longer than the other items (on the image), so it just required slightly more background-position-y than the others. http://jsfiddle.net/2RqmU/11/

[gromfy]

Of course. I missed that. Thanks. Implemented the older version last night: http://dev.aintyomamasblog.com/

It works well. There’s a latency, though. While the page loads, the menu acts like there’s no JS; then it kicks in. Now there is a fair bit of junk that I need to clean up to ease load time (hey, it’s a dev site right now), but is there a “trick” for front-loading the JS? It’s in my section right now.

[Author]

Posts