ElkArte Community

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):

(http://img.liczniki.org/20140719/ii-1405800332.jpg)

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.

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.

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

$('#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.

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.

$('#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:

$('#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.

$('#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'});

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

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 (http://basicuse.net/articles/pl/textile/html_css/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.