Hello all, I have a site I’m working on that I would like to have a few side tabs for some social media links etc. I have set up three on the right of the page using a hover reveal technique using a little transition as well. It works nicely except on touch devices. Meaning the link works but the reveal part has no time before the link goes into action. Is there something I can do so that the touch opens the reveal part and then require another touch to activate the link?
On a touchscreen device, there is no “hover” state, only normal and tap. So, mobile browsers attempt to intelligently detect if what the user wants when they tap is a “hover” or a “click”. Most of the time, it goes with “click” – otherwise touchscreen users would have a terrible time clicking on links and navigating the web!
CSS only allows us to customize styling for three states, “normal”, “hover” and “active” (click). Your solution is using CSS to adjust the width of the element on “hover”. When a mobile user taps on it, the browser jumps right to “active” as that is the very sensible default.
Now, I do have to ask if you really need the tab to slide out. Unlike https://madmimi.com, your slideouts don’t add new functionality, all they do is reveal the name that goes with the logo. ¯_(ツ)_/¯
With that said, I don’t think that slideout tabs are very mobile-friendly to start with – maybe you should be thinking about using a different solution for small screens. Just my 2¢.
Not of help here at all (and Caleb already pointed it out), but I already stalked your other 2 or 3 requests on this issue without a really good idea. Just to
Thanks Guys for your responses.