I am making a website and on the computer size version I have implemented “drop down” text boxes by using div blocks with a set pixel height and setting the overflow to not visible. When the user hovers over the box, I have it set to expand the height which reveals the text below, thus emulating the drop down effect.
I want this effect to also happen on mobile devices (tablets or phones) and I figured setting up the pressed state the same way would allow users to touch the box and have it “drop down.” However when I tested the site from an ipad or iphone, the boxes appear but they refuse to do anything, even when touched. Is there a way to make this effect work on smaller screen devices or should I just disable the effect altogether and have the entire text box constantly display?
in general, in my opinion, it is good to avoid drop downs on mobile devices…not because you can’t get it to work eventually with javascript enabled phones, but think about the user experience… they are wanting simple and straightforward…something they can click and open… so less drop downs is generally a good thing, unless you have some really complicated site structure.
mobile menu is ok… but i tend to avoid the dropdowns for other elements… just for user experience… what might be better are tabbed views…
Thanks for the reply Dave. I was thinking of the drop down boxes so the user could see more selling points without having to scroll down but it seems like scrapping the idea altogether is a better idea. Im curious what you mean by tabbed views?
Hi John, I mean’t perhaps using a tab section that can run on top or on side of the content you want to show, and have different tabs for different content sections. Then when user press finger on a tab would reveal the content for that section.
I did not mean to say that using drop-downs is taboo or anything, or even that tab views is the best answer, it really depends on what kind of content you are trying to display, and I am sure there are many good ways to display the data, and good suggestions from many good designers here on webflow and on the web in general.
I like tabs, because they are easy to implement and look good, and generally a little easier for an average user to understand, that they need to tap on a tab to view the content without having to give instruction for them to do so. Now this is just my own opinion of course… But really, whatever works best for your content … and it is good to keep mind open to new ways to display the content.
There is nothing wrong with drop downs on mobile, just that I tend to avoid them except for main menu…I try to keep most things so that there is the least amount of instruction needed to user and easiest access to the information… sometimes this means having to keep the mobile view more basic than the desktop view… but it is personal preference.
Important thing that whatever you do create, that it works
I bought a template with nice hover interactions that revealed some text upon a nice photo. Now that I’ve realised this effect is not setup to work on touch screen devices (…) I’d like to change this interaction from “hover” to “scroll” triggered, except for pc/laptop formats (wich I prefer to keep on “hover” triggered).
Is there any option to run different interactions in different devices?
I’ve also tried to add a different class for “mobile” but it’s a nonsense…
Sorry I think I’ve just discovered the solution to my recent post…
I will try to DUPLICATE the section and make it visible for tablets & phones (with scroll triggered interactions in it), and keep the original section (with hover) to visible for desktop only.
More cheers,
JC
Hi @jcawoopa, thanks for your posts. At the moment, the scroll triggers are disabled on mobile devices. You can set an element visible or not visible based on the viewport (see settings in the designer). For mobile devices, you could use a click trigger or load trigger using interactions.
Hi, thanks for your update. Sorry I should have mentioned, the iOS does not have scroll based triggers since iOS is using touch based events. Cheers ! Dave
