/ theme

Making the Tempera Wordpress theme menu faster

Cryout Creations has a wonderful theme called Tempera for Wordpress. It's free to use and full of features and customization. It was with this that I designed the Maple Lab Website, a music cognition research lab in McMaster University looking at perception and acoustics.

While I was able to solve a lot of problems through CSS (which I can talk about more later), one thing that always bugged me was the menu dropdown speed. Whenever you hovered your mouse over the menu, a dropdown would appear slowly. If you moved away from it, it'd disappear slowly. It being slow meant you could accidentally move your mouse over the disappearing menu and make it appear again. This was especially frustrating when you had videos or tools near the top of the screen... if the user accidentally opened the menu, they could get into a frustrating loop of trying to get away and trying to use to the tool and accidentally hovering over it again!

Anyways, last year when I did this I had little knowledge of PHP or website construction, and was just learning Javascript. This year I stumbled upon the snippet of code that controls this menu speed!

You usually want to create a Child Theme so that your theme is still compatible for future updates. That being said, I ran into weird issues trying to override the javascript file in the child theme, so in the end I opted to edit the file directly.

The snippet of code is under `tempera/js/frontend.js'. Open that file up in your favourite text editor (cough brackets cough) and go to Line 44. If you want, you can replace the almost-identical chunk there with this. I made a variable menuTIME so you can just change that number to change all the timings.

Line 44
/* Menu animation */ jQuery("#access ul ul").css({display: "none"}); /* Opera Fix */ jQuery("#access > .menu ul li > a:not(:only-child)").attr("aria-haspopup","true");/* IE10 mobile Fix */ var menuTIME = 250; jQuery("#access li").hover(function(){ jQuery(this).find('ul:first').stop(); jQuery(this).find('ul:first').css({opacity: "0",marginTop:"50px"}).css({visibility: "visible",display: "block",overflow:"visible"}).animate( {"opacity":"1",marginTop:"-=50"},{queue:false, duration: menuTIME-25}); },function(){ jQuery(this).find('ul:first').css({visibility: "visible",display: "block",overflow:"visible"}).animate( {marginTop:"+=50"}, {queue:false, duration: menuTIME}).fadeOut(menuTIME); });

As a side note to myself, showing code with Ghost isn't that great. I wonder how other people do it...



I do tactile research—It's a touchy subject. Psych/Neuro grad student and creator of LittleGadget, a channel about Science and Videogames.

Read More