Search jQuery

jQuery Forum

Animating Superfish Custom Arrow in Sub Menu?

in Using jQuery Plugins • 12 years ago

I've added a custom arrow to the Superfish sub menu, and the problem that I'm experiencing right now is that it gets animated together with the Superfish menu and only shows up a tad bit too late and does not look smooth.

I'd like to smoothen it up a bit by adding my own animation to the arrow image.

You can see a demonstration on my blog at: http://www.webprofitideas.com

Simply hover over CONTACT, then you'll see the sub menu. As you can see the arrow shows up with a delay.

Now I'd like to make it slide up smoothly and I tried the following:

jQuery('ul.sf-menu li ul').parent().hover(
function() {
jQuery('.arrow img').slideUp('slow');
}
);

But now the arrow does not show up at all.

Any ideas how I can achieve this goal of making the arrow slide up?

If there is no good way to do this is there any way to exclude the arrow from the sub menu animation so it shows up immediately? Does jQuery have a command like ".no-animation()" or something along the lines?

Thanks for the suggestions.

Replies(3)

charlietfl

Re: Animating Superfish Custom Arrow in Sub Menu?

12 years ago

far simpler to just add the arrow to first li of sub menu with css

chasedhero

Re: Animating Superfish Custom Arrow in Sub Menu?

12 years ago

Yeah, but when I do that it will show them on ALL menu items, and not just on the sub menu and also not just on hover, they'll be visible for all the top menu times.

EDIT: wait you said first li OF sub menu, well that's exactly what I did, here's the code:

jQuery('.sf-menu > li > ul > li:nth-child(1)').prepend('<div class="arrow"><img src="wp-content/themes/chase_theme/images/superfish_arrow.png" />');
jQuery('.arrow').css({
height: '0px',
width: '7px',
margin: '0 auto 0',
position: 'relative',
top: '-15px',
visibility: 'visible',
});

It is the FIRST LI OF SUB MENU.

Or did you mean the parent li of sub menu?

EDIT2:

Ok I misunderstood you at first but I think this is what you meant, because this is how I got it work:

jQuery('.sf-menu > li > ul').parent().hover(function() {
jQuery(this).prepend('<div class="arrow"><img src="wp-content/themes/chase_theme/images/superfish_arrow.png" />');
jQuery('.arrow').css({
height: '0px',
width: '7px',
margin: '0 auto 0',
position: 'relative',
top: '13px',
visibility: 'visible',
});
});

All I need to do know is configure a hover out (I'm not JS coder, so I don't know), because when you hover over the arrow will remain and will not go away.

Thanks for the tip, it works great!

chasedhero

Re: Animating Superfish Custom Arrow in Sub Menu?

12 years ago

this is the final code:

jQuery('.sf-menu > li > ul').parent().hover(
function() {
jQuery(this).prepend('<div class="arrow"><img src="wp-content/themes/chase_theme/images/superfish_arrow.png" />')
jQuery('.arrow').css({
height: '0px',
width: '7px',
margin: '0 auto 0',
position: 'relative',
top: '13px',
visibility: 'visible',
});
}, function() {
jQuery('.arrow img').delay(600).slideUp('normal');
});

Works GREAT!

Demonstration: http://www.webprofitideas.com (hover over contact)

Thanks for the help charlie, you the man, you made my day lol =D

Top Reply

Response title

Attachments

jQuery Forum

Animating Superfish Custom Arrow in Sub Menu?

Replies(3)

Re: Animating Superfish Custom Arrow in Sub Menu?

Re: Animating Superfish Custom Arrow in Sub Menu?

Re: Animating Superfish Custom Arrow in Sub Menu?

Statistics

Tags

Actions