Skip to main content ↑ ↓
Topic: Changing animation of the dropdown menu (Read 3741 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Changing animation of the dropdown menu

I was looking into deeper personalisation of the ElkArte themes and I was wondering if there is a easy way to change the animations on the dropdown menu (shown on the screenshot):



I found a file called theme.js in which the speed of the animation can be changed and as phantom pointed out to me that there is also other file called elk_jquery_plugins.js

I'm not really a JS/jQuery fan as I mainly use CSS3 transitions.

Re: Changing animation of the dropdown menu

Reply #1 –

To change the animation, you can pass the menu plugin an animation "object", of css properties.  You do that in theme.js, we added that in that place since you can easily have your own theme.js, just start with the default one and mod away.

Back to animation, I don't think you can pass in an easing effect, but for a quick example lets say you want a diagonal build plus fad in effect.

Code: (find) [Select]
$('#main_menu, ul.admin_menu, ul.sidebar_menu, ul.poster, ul.quickbuttons, #sort_by').superfish({delay : 300, speed: 175, hoverClass: 'sfhover'});

Code: (replace) [Select]
$('#main_menu, ul.admin_menu, ul.sidebar_menu, ul.poster, ul.quickbuttons, #sort_by').superfish({delay : 300, speed: 275, hoverClass: 'sfhover', animation: {opacity: 'show', height: 'show', width: 'show'}});

The speed of the animation is controlled by the speed value, the animation by the animation{} object.  There is also an animationOut that controls the out effect.

Re: Changing animation of the dropdown menu

Reply #2 –

Thank you! I managed to play around with the animation and I also got the slide down or slide from the side effect.

However, animationOut doesn't seems to be working for me.

Re: Changing animation of the dropdown menu

Reply #3 –

Quote from: CrimeS – Thank you! I managed to play around with the animation and I also got the slide down or slide from the side effect.

However, animationOut doesn't seems to be working for me.
The animationOut issue is because of the way the menu CSS is done, specifically the left: -9999px; etc  So the animation is occurring, its just occurring off screen.  I believe the menus CSS was done that way (vs display: none) so things work w/o javascript enabled and just pure CSS.  Superfish + hoverintent was/is primary used for a11y reasons.

So a quick fix to make animationOut work would be to add the following to your theme JS (the display none is taken care of already by superfish), is to add these lines after the menu lines.
Code: [Select]
$('#main_menu ul').css({left: '0'});
$('#button_profile ul').css({right: '0', left: 'auto'});
Thats only the main menu (note the button_profile is special so it expands to the left vs right to keep it on screen),

You can chain that call to other menus as well, just do it like:
Code: [Select]
$('#main_menu ul, ul.admin_menu ul, ul.poster ul').css({left: '0'});
Although you may find you need to adjust the numbers on a individual menu basis to prevent jumpiness, not sure really.

Also note you can control the animationOut speed separately form the In, just add speedOut: ### to the spuerfish call ... so for a really slow out effect.
Code: [Select]
$('#main_menu, ul.admin_menu, ul.sidebar_menu, ul.poster, ul.quickbuttons, #sort_by').superfish({delay : 300, speed: 275, speedOut: 1500, hoverClass: 'sfhover', animation: {opacity: 'show', height: 'show', width: 'show'}, animationOut: {opacity: 'hide', height: 'hide', width: 'hide'}});
$('#main_menu ul').css({left: '0'});
$('#button_profile ul').css({right: '0', left: 'auto'});

Re: Changing animation of the dropdown menu

Reply #4 –

I see it now, thank you! It will be definitely used in further theme development.

Re: Changing animation of the dropdown menu

Reply #5 –

I think, it's good idea to use only CSS for this. New features of CSS3 allows you to use any kind of animation without JavaScript, here is example: how to create animated drop-down menu using only CSS3. It works even faster because we can avoid of the use of JavaScript. It works in all modern browsers.

Re: Changing animation of the dropdown menu

Reply #6 –

Can't we use / be allowed to use css to override that instead?

Re: Changing animation of the dropdown menu

Reply #7 –

Superfish is attached to the menus through theme.js a file that is theme-specific, so if you are creating a theme you can just remove the relevant code.
Or you have in mind something different?
Bugs creator.
Features destroyer.
Template killer.
 

Re: Changing animation of the dropdown menu

Reply #8 –

Quote from: efuif – I think, it's good idea to use only CSS for this. New features of CSS3 allows you to use any kind of animation without JavaScript, here is example: how to create animated drop-down menu using only CSS3. It works even faster because we can avoid of the use of JavaScript. It works in all modern browsers.
Indeed you can use CSS only for that and its easy to disable the JS in any custom theme. 

The primary reasons for the JS were/are to improve a11y, suppress menu jumpiness and enable click menus (mobile devices etc)  .. there are ways of doing that with CSS but you will find that its not straight forward and requires some CSS/Html "tricks" etc.

I think in the future as we "drop" older browser support (read ones that don't fully support CSS3) and some CSS menu and accessibility things stabilize we can move to a CSS only solution but its not now.  Thats IMO of course !