I am using Superfish 7.x-1.9 and I would like to change the Slide-In Effect so that the menu works similar to www.bu.edu.

So I am thinking I will need to change the slide in to affect the overall menu. So I need it to change from the UL to I am guessing the #menu-bar. Can anyone help me on where and how to make this change? I want the whole menu to kind of slide down similar to Boston University. I have changed the CSS so that all the sub-menus show on rollover, but the whole thing jumps down instead of sliding in nicely. I did add easing to my Library and am using the easeOutQuart (Vertical) option.

If anyone needs any other info to help me with this just let me know. Thank you.

Comments

mehrpadin’s picture

mehrpadin commented

Hey there,

This is very interesting! take a look at my reply here: #1871168: Upon hover over single parent expand entire menu

ryanfc78’s picture

ryanfc78 commented

mehrpadin,

That is perfect had not thought of approaching it that way. However, I have run into one problem. I have it all set up and if I am logged in it works as intended. But if I logout it now longer works. Thought it might have something to do with permissions but I did confirm that 'View Published Content' is checked for all levels of user. Any thoughts on why it is not working for Anonymous users? I do have the menus being run my Superfish as I like the options it has.

ryanfc78’s picture

ryanfc78 commented

Nevermind, I changed the rollover effect on the wrapper id instead of the inner id I had it on before and it fixed the issue.

mehrpadin’s picture

mehrpadin commented
Category: feature » support
Status: Active » Fixed

Glad to see :)

ryanfc78’s picture

ryanfc78 commented

OK one more question. I changed the code slightly to give it the animation I was looking for which I will post below. One thing I am noticing is when you first load the page it gives a hard open. After that first hard open it opens and closes like I would like. I have tested this in Chrome, Safari, and Firefox. All give that first hard open. Any ideas on how to fix that.

jQuery(document).ready(function(){
  jQuery('#menu-wrapper').mouseenter(function(){
    jQuery(this).animate({height:'20em'},{queue:false,duration:400}, "easeOutQuart" );
  }).mouseleave(function(){
    jQuery(this).animate({height:'3.5em'},{queue:false,duration:400}, "easeOutQuart" );
  });
});
ryanfc78’s picture

ryanfc78 commented

Any thoughts or input on this from anyone? It starts with a hard open then does the easing in and out. Would like to be able to fix it where it always eases in and out.

ryanfc78’s picture

ryanfc78 commented
Status: Fixed » Active
mehrpadin’s picture

mehrpadin commented

Need to see it, put it online and email me the URL.

ryanfc78’s picture

ryanfc78 commented
Status: Active » Fixed

For those interested in the solution we removed the css for:

#menu-wrapper:hover {
    height: 20em;
}
and the removed the height tag i had for #menu-wrapper of 3.5em

and then adjusted the JS file as such:

jQuery(document).ready(function(){
  jQuery('#menu-wrapper').css({height:'3.5em'}).mouseenter(function(){
    jQuery(this).animate({height:'20em'},{queue:false,duration:400},"easeOutQuart" );
  }).mouseleave(function(){
    jQuery(this).animate({height:'3.5em'},{queue:false,duration:400},"easeOutQuart" );
  });
});

now it opens correctly the first time.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.