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.
On the other hand, JavaScript allows us to watch for many more states than CSS. The webpage you linked to is using JavaScript to adjust the width. Unfortunately, the JS is all obfuscated to I’m having a hard time parsing exactly how they are doing it, but for anyone experienced in JS would find this very easy (I could put a script together, but I don’t know enough about JS to build you a good system that is cross-compatible).
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
The hover class on mad-mini seems to be applied by JavaScript not by CSS. This will mean, that (theoretically) the hover (or tap) can be separated from link click (or tap). Furthermore, there is an outer-life (wrapper to target hover) and an inner-life (link) in the construction.
Thanks Guys for your responses.
You are both correct this is a JavaScript function. I found this info http://www.building58.com/examples/tabSlideOut.html which is what I have been looking for. Hopefully there will be no conflicts.