This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
Related
I am developing a CSS framework that relies on being simple, minimal and pure CSS as much as possible. What I want is to to make certain things like dropdowns open on hover, however I am uncertain how to go about implementing this with only CSS on mobile devices.
Having checked this answer previously, I confirmed what I partially knew to be true: that certain mobile browsers and devices will use the :hover pseudo-class when clicking an element, which will allow me to open dropdowns the way I want. Others say that :active works as well.
I am using both in one rule, as well as :focus to cover as many environments and cases as possible, however I am not certain this will work well across many devices. So my questions are:
Is there any way to make sure a hover-based dropdown component will work across devices?
Are there pseudo-classes or properties that I can use that might be browser-specific or something similar to make sure that most devices are covered?
Is there documentation about touchscreen, mobile device or mobile browser behaviour and how they handle hover events?
This is nearly a duplicate of a bunch of questions out there, but I want to address your main points:
By "a hover based dropdown" you mean one that will appear as long as the user has their finger on it? As a mobile user, I can't picture this being a successful UX
All pseudo-classes are here https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes The ones I would consider "interactive" are :active, :checked, :focus, :hover. The trouble with :hover is, as you say, it isn't well supported and, again, it doesn't really fit the way users interact with mobile sites. The trouble with :checked is it relies on checkboxes, which puts pretty severe restrictions on the supported markup.
Definitely mobile Safari doesn't support it, which means it's a big enough problem to matter.
The most common solution is to use javascript touchevents, but if you're going all-CSS that isn't going to work for you.
You may find something useful here Hover effects using CSS3 touch events or here :touch CSS pseudo-class or something similar?
The site I am making has a hover menu, what is best practice to deal with this for touchscreens. How can I get it to work on mobile devices?
I googled this and some responses suggest:
:active
So I tried a quick fiddle on an iPhone, but it doesn't appear to work.
Whats the correct way to tackle this and why does my fiddle not work?
Also is there a CSS only solution?
For obvious reasons, the hover behavior doesn't work on touch devices. The most apparent solution is to make your menus activate on click, and if that's the case, I would recommend making that standard behavior for the desktop version as well. There's a case to made against hover menus because they just aren't as usable: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Today I have launched a WordPress blog it took me much time to develop the theme for. Now it was the first time I could request the site via iPhone I was just shocked. I thought it would be a simple task to realize a touch menu by writing simple HTML and styling it taking advantage of the :hover-state to display or not display it's content.
If you switch your Browser to a mobile user agent and load this site (make the window about 640px wide before), you will see my light blue widget bar. Hovering over the icons on it will toggle the inner containers with the main widget contents — works like a charm.
Unfortunately, when I call the site on my iPhone, that bar with the icons will appear but will not be touchable at all. Damn! What's wrong with my code? I hope you can help me. Thanks in advance
Here is what I found with hover in iOS. http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php. It may be the fix to your problem. Or others down the road.
"With the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) in place iOS won't hover unless you add display:none/display:block or display:table/display:block. Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link. So if you find the iOS device won't (or correctly) hover for whatever reason here is your probable fix."
Now I figured out I never could get it working the way I wanted when posting this question (I'm sorry the link doesn't show it anymore). Explanation: My markup was like:
<li class="widget-container">
<p class="widget-title">Categories</p>
<div class="widget-content">
<ul>...</ul>
</div>
</li>
The style was like:
.widget-content {display:none}
.widget-container:hover .widget-content {display:block}
I'd love to code as simple as this but it won't work for a good reason: On touch devices, the touch-action is always targeting the uppermost object in z-index which in this example would be the .widget-title. Thatfor, the wrapping .widget-container can never be touched and thus its :hover-state will never be triggered.
This exercise made me recognize a touch-screen-optimized site has to incorporate JavaScript to work well. So I came up with a jQuery accordion solution now.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />