All geek questions in one place

CSS on touch clients. Are pure CSS outputs extinct?

My company is beginning to move towards adding an iPad as a browser, on which I have to test my work. It made me think ...

Since touch control clients have no state: hover, will CSS drop-down lists be unavailable?

Then I thought that even if you add javascript so that the popup menu pops up ... What happens when a menu item (which expands to another menu) is also a link. How do you determine the difference between a mouse click to see a menu or click to go to this link?

What will happen to drop-down menus when touch-based clients become more ubiquitous? Are there any other workarounds?

+4
source share
3 answers

This is a kind of design problem caused by a technical problem. I would probably redesign / reorganize my content in one of three ways:

1- Click-activated mega-menus ( example ). The downfall here is that you may have real estate problems.

2- Top-level category links that lead to navigation pages. The downfall here is that extra page loading is required to get content.

3- Make each menu item consists of two buttons, one to go to the page (text) and one to expand the child menu (arrow.) However, you will need to provide navigation for the child, if present, on the page on which the user jumps when he clicks a menu item.

+4
source

Available touch-down CSS pages are available on touch devices thanks to the: target pseudo-class. Basically, a pseudo-class is active for objects that have an identifier corresponding to the current fragment of the URL. This means that a URI fragment can be used to store and share state using CSS. For example, let's say we are at http://example.com/ , which has the following HTML and CSS:

<style> #menu { display: none; } #menu:target { display: block; } </style> <a href="#menu">Show the Menu!</a> <div id="menu"> ... </div>

The menu is hidden by default. Clicking or clicking a link will change the URL fragment to a “menu” (full URI: http://example.com/#menu ). Since there now exists an element with an identifier equal to a URI fragment ("menu"), the: target pseudo-class is applied, and the display property changes.

Further reading:

+6
source

my navigation bar has this function (collins.class401.com/nav) for the crap you need its modified version of TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp their version (and mine) uses visibility for: hover their version also only supports menu items, while mine also supports s (although spacing breaks their keyboard navigation) if you want something like a form or button in your menu, for example, I have their version usually works for: hover over iPod touch while you press "blank space", my I version is much more touch-friendly and has clickable arrows to switch the display using prototype.js,

or, if they cannot be hung, and javascript is turned off, setting up a php session and reloading the page, and then inserting the style into the style tag at the end of the page, which will overwrite the visibility and display accordingly, click to show or hide

0
source

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

More articles:


All Articles