All geek questions in one place

CSS Drop-down menu on a mobile device. how to get around: hover

I had a search, and I could not find anything, as well as his first time using the site, so I hope they did not ask him.

I ran into a situation. I am by no means an experienced website maker. I study when I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the field of mobile devices, I encounter a problem, namely that :hover does not work (obviously).

I found this: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly , but I can't get the rosy job to work.

This page I'm talking about is here: http://www.inkslinger.co.uk/calibre/index.html I really can't solve it and her driving is absolutely butt. Any help would be really appreciated.

+6
source share
5 answers

I had the same problem and found a light workaround that I used here a hover example

The Post Natal and Ante Natal options, when they freeze, cause a drop, but you may notice that they are NOT links. In my original model, they were links, but when I realized that this would not work on touch devices, I just turn them into triggers for drop-down boxes, and also put links inside the boxes. Thus, for you, your link “What we do” will not be a link, just a trigger for the drop-down menu, and then in the menu you can specify your link to the information “what we do”.

It’s also worth remembering that some touch devices, such as some iPads, don’t like hover states at all, if you find that the hover state doesn’t bring up a dropdown menu, then add 'onclick = "return true" to the list item in question. Usually this makes a hang state, like a click.

Hope this helps, what I wrote represents about 3 days of working on my reference library.

+2
source

We had this problem and the hover on clicks has changed.

0
source

Instead of using hovering, which of course is not possible on touch devices, using: active is likely to be a good start. Something is still possible on touch devices, bind the menu to the active state of the switch, and you're done.

0
source

You will need to go from the hover to the click event for this case. There is no workaround for this.

You should definitely consider changing your design to have a hamburger-style menu that opens to the left for touch devices.

See this demo from the link you posted. When you open it on a mobile device, it changes to a different menu style. http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

Also, if you want your top link to be a direct link to another page; You can have two separate clicks on the top button for this. The first click will open the menu, and after opening the menu, you can assign it a direct link, as shown in the above demonstration.

0
source

Put this line of code in your header tag as follows:

 <head> <script>document.addEventListener("touchstart", function(){}, true);</script> </head>

Create an active class for your hover element as follows:

 element:hover, element:active { Your CSS }

Voila.

0
source

Source: https://habr.com/ru/post/958739/

More articles:


All Articles