Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: MrMike on June 19, 2011, 11:46:16 AM

Title: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: MrMike on June 19, 2011, 11:46:16 AM
I like the 2.0 release and I like the Admin dropdown/flyout menus...but one thing is driving me crazy: the menu is too responsive, that is, it closes too quickly when you overshoot with the mouse or move off of a sub-menu. I end up having to go back and drill down through all the menus to get to what I want.

Is there a way to slow down or delay the closing action? I've looked around in all the .js files but can't find anything that looks like it would control that.
Title: Re: Slowing down the 2.0 menu
Post by: Sir Osis of Liver on June 19, 2011, 02:08:15 PM

Roger that.  The dropmenus are way too touchy.

Title: Re: Slowing down the 2.0 menu
Post by: CapadY on June 19, 2011, 03:49:05 PM
Do you have those problems with the default theme or with a third party theme ?
Title: Re: Slowing down the 2.0 menu
Post by: Sir Osis of Liver on June 19, 2011, 03:54:52 PM

I've had that problem since day 1 on this forum.  Might be because I'm old and slow, but it's not something I've run into anywhere else.

Title: Re: Slowing down the 2.0 menu
Post by: MrMike on June 19, 2011, 06:03:32 PM
Quote from: Krash. on June 19, 2011, 03:54:52 PM
I've had that problem since day 1 on this forum.  Might be because I'm old and slow, but it's not something I've run into anywhere else.
I'm thinking it's 100% CSS-driven menu, so there is no javascript that can be tweaked. :(
If there's javascript controlling it, I can't find it.
Title: Re: Slowing down the 2.0 menu
Post by: Antechinus on June 19, 2011, 06:59:30 PM
Yes the menus are pure CSS in 2.0. If you want delays you can do that with custom js (would suggest one of the many jQuery scripts for that) or by using CSS3 if most of your users are on modern browsers (meaning not IE8).

The best jQuery based menu system I've seen so far is Superfish (http://users.tpg.com.au/j_birch/plugins/superfish/). I am seriously in favour of using that as the default menu system in 2.1 and up.

ETA: I probably should write a tutorial about converting 2.0 default menus to Superfish.
Title: Re: Slowing down the 2.0 menu
Post by: MrMike on June 19, 2011, 09:44:07 PM
Quote from: CapadY on June 19, 2011, 03:49:05 PM
Do you have those problems with the default theme or with a third party theme ?
It's the same in every theme. The menus don't persist for even an instant. Miss one of them or go off the edge by 1 pixel and you have to start all over.

I love SMF and I've been a faithful user for years, but in my opinion this menu was not a very well thought out design decision.
Title: Re: Slowing down the 2.0 menu
Post by: Antechinus on June 24, 2011, 06:57:26 PM
Ok MrMike, you want the Superfish menus. These are what we will most likely be using in 2.1. I'll be adding them to my Curve variants and to any custom themes I do from now on. I may write a mod to add them to 2.0, but honestly it's so easy it's hardly even worth a mod.

To get them running on the 2.0 default, find this in index.template.php:

// Here comes the JavaScript bits!
echo '


and add this on the next line:

<script type="text/javascript" src="', $settings['theme_url'], '/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/superfish.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/hoverIntent.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$("ul.dropmenu").superfish();
});

</script>


This will apply the Superfish/hoverIntent js to all 2.0 default drop menus on all pages.

You'll also need the actual js files themselves. You can get jQuery itself here: http://jquery.com/
Select the "Production" option and save the resulting code to your desktop as jquery-1.4.2.min.js. That then gets loaded to your server.

ETA: Correction. I just checked again and the delay on mouseout doesn't appear to work with jQuery 1.6.1. However it does work with jQuery 1.4.2 (http://code.jquery.com/jquery-1.4.2.min.js). Updated code to suit.

Superfish is available here: http://users.tpg.com.au/j_birch/plugins/superfish/#download

HoverIntent is available here: http://cherne.net/brian/resources/jquery.hoverIntent.html

Note that for testing I just dropped all the js files into the folder for the test theme. For use on an actual site, it would make more sense to drop them in your public_html folder (web root) so they are available for use on any theme or page on your site. Obviously, you'd have to change the paths to the files, like this:

<script type="text/javascript" src="http://www.yourdomainname.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.yourdomainname.com/superfish.js"></script>
<script type="text/javascript" src="http://www.yourdomainname.com/hoverIntent.js"></script>


You can also call jQuery itself direct from Google's servers if you like. A lot of sites do this.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

I found that some of the default settings in the js files could be better. In hoverIntent.js I suggest setting the sensitivity, interval and timeout to these values:

;(function($){
/* hoverIntent by Brian Cherne */
$.fn.hoverIntent = function(f,g) {
// default configuration options
var cfg = {
sensitivity: 10,
interval: 30,
timeout: 1
};


And in superfish.js I suggest using these values:

sf.defaults = {
hoverClass : 'sfhover',
pathClass : 'current',
pathLevels : 1,
delay : 700,
animation : {opacity:'show', height:'show'},
speed : 350,
autoArrows : false,
dropShadows : true,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}


Of course you can experiment with those settings to suit your own preference, but I found they gave the best compromise between smoothness and speed. Do note though that for use with 2.0 default you will want the autoArrows set to false, otherwise it makes a bit of a mess. The dropShadows could be set to false as well since it doesn't seem to do anything, but I left it the way it was.

ETA: This should probably be in Tips and Tricks. Moving now. :)
Title: Re: Slowing down the 2.0 menu
Post by: MrMike on June 24, 2011, 08:18:42 PM
Thank you, Antechinus. I'll try and give this a shot in the next couple of days and see what happens. :)
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Antechinus on June 26, 2011, 08:47:45 PM
Would also suggest you try the positioning and styling tweaks listed here: http://dev.simplemachines.org/mantis/view.php?id=4776

The styling is personal preference of course, but IMO the changes in positioning definitely improve ergonomics.
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Masterd on June 27, 2011, 04:53:16 AM
This is great! Thanks, Ant!
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Antechinus on June 27, 2011, 04:56:39 AM
Yeah they're awesome menus. I love them to bits. I'm kicking myself that I didn't start playing with them earlier. ;D
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Robert. on June 27, 2011, 10:45:45 AM
Thanks Ant :) Do you allow me packaging your css changes into a mod (with credits ofcourse)? :)
Title: Re: Slowing down the 2.0 menu
Post by: Masterd on June 27, 2011, 02:44:46 PM
Quote from: Antechinus on June 24, 2011, 06:57:26 PM
I may write a mod to add them to 2.0, but honestly it's so easy it's hardly even worth a mod.
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Antechinus on June 27, 2011, 06:07:01 PM
Would rather hold off on the mods for the moment.

ETA: The reason I'd rather hold off on a mod for now is because I want to do more testing. If packaging things up, it would make sense to do the jQuery menus as well as the CSS tweaks. I've only tested the menus with a couple of different jQ files and want to see which versions they work properly with.
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Biology Forums on August 21, 2011, 08:02:58 PM
I'm assuming this works for 1.1.14 as well?
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Illori on August 21, 2011, 08:21:26 PM
1.1.1* does not have the same menu system so i would have to say no.
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: Errapolis on September 05, 2011, 11:54:47 PM
Quote from: Antechinus on June 26, 2011, 08:47:45 PM
Would also suggest you try the positioning and styling tweaks listed here: http://dev.simplemachines.org/mantis/view.php?id=4776

The styling is personal preference of course, but IMO the changes in positioning definitely improve ergonomics.
I had a "gap" between the menu button and the menu which caused Chrome and IE8 problems in anyone trying to get to the menus; they closed too quickly.

I had got rid of the menugfx background and used a solid colour and somehow messed up the CSS.  Two hours of messing about trying to fix it and I gave up and resorted to searching on here. 

I was going to use the superfish thing to try fix it, but thought i'd try this to fix the CSS.

Not only did applying some of these changes fix the issue, it looks much, much smarter too.  Thanks!
Title: Re: Accessible jQuery menu system (Slowing down the 2.0 menu)
Post by: krishnawebdevelopers on October 12, 2011, 05:57:55 AM
Hello Friends,
I just want a good jquery menu for my website
Please suggest me the freeware menus
Thanks in advance.