I’m working on a plugin and there is one thing currently stopping me. I’m trying to figure out the best approach for hiding and displaying an element when the link is hovered.
Basically when you hover over a link in the plugin demo bellow, the menu shows up and the user will be able to click one of the buttons inside the menu. Obviously the menu disappears once the link isn’t hovered anymore, so clicking a button in the menu is impossible. I took this approach here. http://j-v.me/urltargetmenu.js/ which basically delays the menu hiding, giving the user enough time to enter the menu and the hide event is canceled if the cursor hovers over the menu. The problem is that this method doesn’t work well on mobile, and its unreliable.
Heres the 2nd version of the plugin. So i’m trying to find the best way to show and hide the menu with reliability, and mobile friendliness. Any ideas?
In most CSS menus, the hover statement is on an
<li> item in a
MOD EDIT – Unformatted (and therefore unreadable) code removed.
That means that you are still hovering over the
<li> when you hover over one of the submenu items.
There are many sites that discuss this: one is http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu. Hope that’s helpful.
it doesn’t work well on touch-screens, and if you move over the link, out and back in quick enough, you can have the menu disappear when the cursor is hovered over the link.(On the first demo). I guess i could stick with the method im using now if i could find a way to fix those two issoes
I guess that would work but is it ok to require 2 jquery libraries for such a simple plugin?
Well yes,of course it’s Ok…but I’m not sure what you are referring to by plug-in.
If you mean the functionality, it’s not really a ‘plug-in’ as I would normally expect to see the term used but that could be me misunderstanding.
You really don’t need to include jQuery Mobile,
I’d be tempted to do a feature detection first to see if the device using the plugin supports touch, if it does then trigger the menu on touch/click, if not, then trigger the menu on hover,
Check out the method that Modernizr uses to detect for touch enabled browsers here
First off: this is actually a neat little plugin you’re working on ;-)
Now, on topic:
Maybe an easy way is to put the little menu inside the anchor, this will at least fix the issue for “regular” browsers, as you’ll still be hovering over the anchor while you’re hovering over the menu.
Now, when it comes to other devices that use touch, it might be better to use jQuery and listen for ‘click’ events (I don’t think you have to listen to native touch events, afaik most (all?) mobile browsers send a click event as well).
So a little mockup:
It’s really rough and you’d probably want it to behave a little different, but what it does is: when you click the link (you can also hover it on desktop) it will show the menu, then when you click the link again, it will go to that link regardless.
Again: you’d need to change the code here and there and do some decent testing, but it should get you on the right track (hopefully) ;-)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".