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?
It’s not the same situation. I tried implementing something like that but it doesn’t work because the wrapper div must be the same dimensions as the link. So its not like it will stretch to contain the menu
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’m not sure what you mean, but i intend for others other than me to use this. So will they be willing to add an extra library for such a simple plugin? i dont think it will be worth the effort unless they are already using jquerymobile
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) ;-)