Accessible jQuery menu system (Slowing down the 2.0 menu)

Started by MrMike, June 19, 2011, 11:46:16 AM

Previous topic - Next topic

MrMike

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.

Sir Osis of Liver


Roger that.  The dropmenus are way too touchy.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

CapadY

Do you have those problems with the default theme or with a third party theme ?
Please, don't PM me for support unless invited.
If you don't understand this, you will be blacklisted.

Sir Osis of Liver


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.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

MrMike

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.

Antechinus

#5
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. 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.

MrMike

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.

Antechinus

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

MrMike

Thank you, Antechinus. I'll try and give this a shot in the next couple of days and see what happens. :)

Antechinus

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.


Antechinus

Yeah they're awesome menus. I love them to bits. I'm kicking myself that I didn't start playing with them earlier. ;D

Robert.

Thanks Ant :) Do you allow me packaging your css changes into a mod (with credits ofcourse)? :)

Masterd

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.

Antechinus

#14
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.


Illori

1.1.1* does not have the same menu system so i would have to say no.

Errapolis

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!

krishnawebdevelopers

Hello Friends,
I just want a good jquery menu for my website
Please suggest me the freeware menus
Thanks in advance.

Advertisement: