Les listes déroulantes CSS sur les clients tactiles. Les listes déroulantes de pure CSS vont-elles s'éteindre?

Question

Mon entreprise commence à se tourner vers l'ajout de l'iPad comme un navigateur que je dois tester mon travail. Cela m'a fait penser ...

Puisque les clients tactiles n'ont pas un état: hover, les listes déroulantes CSS vont-elles disparaître?

Ensuite, j'ai pensé que même si vous ajoutez du javascript pour faire apparaître les menus en cliquant sur ... Que se passe-t-il lorsque l'élément de menu (qui s'étend à un autre menu) est également un lien. Comment faites-vous la différence entre un clic pour voir le menu ou un clic pour aller à ce lien? Qu'arrivera-t-il avec les menus déroulants lorsque les clients tactiles deviennent plus omniprésents? Existe-t-il des solutions de contournement?

Answer 1

Ceci est une sorte de problème de conception forcé par un problème technique. Je refaisais/réorganisais probablement mon contenu de l'une des trois manières suivantes:

1- Méga-menus activés par clic (example). La chute ici est que vous pourriez avoir des problèmes immobiliers.

2- Liens de catégorie de premier niveau menant aux pages de navigation. L'inconvénient ici est qu'il nécessite un chargement de page supplémentaire pour accéder au contenu. 3- Faire en sorte que chaque élément de menu se compose de deux boutons, l'un pour naviguer vers la page (le texte) et l'autre pour développer le menu enfant (une flèche). Vous devez néanmoins fournir la navigation enfant , si présent, sur la page à laquelle l'utilisateur accède lorsqu'il clique sur un élément de menu.

Answer 2

ma barre de navigation a cette fonctionnalité (collins.class401.com/nav) pour les conneries que vous avez besoin sa version modifiée de TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp leur version (et la mienne) utilise la visibilité: hover leur version aussi que les supports ayant < a> comme éléments de menu, alors que le mien supporte aussi < span> s (bien que l'utilisation de spans brise leur navigation au clavier) si vous voulez quelque chose comme un formulaire, ou un bouton dans votre menu, pour: hover sur ipod touch, tant que vous cliquez dans le 'espace blanc' ma version est beaucoup plus conviviale pour les appareils tactiles, et a les flèches cliquables pour basculer l'affichage en utilisant prototype.js,Ou, s'ils ne peuvent pas planer, et que javascript est désactivé, définir une session php et recharger la page, puis insérer un style dans l'étiquette de style à la fin de la page qui écrase la visibilité et l'affichage selon si vous avez cliqué pour afficher ou masquer

Answer 3

Des listes déroulantes CSS pures sont possibles sur les périphériques tactiles grâce à la pseudo-classe cible. Fondamentalement, la pseudo-classe est active pour les objets qui ont un identifiant correspondant au fragment d'URL actuel. Cela signifie que le fragment URI peut être utilisé pour stocker et partager l'état avec CSS. Par exemple, disons que nous sommes sur http://example.com/, qui a le code HTML et CSS suivant:

<style> 
    #menu { 
     display: none; 
    } 
    #menu:target { 
     display: block; 
    } 
</style> 

<a href="#menu">Show the Menu!</a> 
<div id="menu"> ... </div> 

Le menu est masqué par défaut. En cliquant ou en tapant sur le lien, le fragment d'URL sera remplacé par "menu" (URI complète: http://example.com/#menu). Parce que maintenant il y a un élément avec un id égal au fragment d'URI ("menu"), la pseudo-classe: target s'applique, et la propriété d'affichage est changée.

Pour en savoir plus:

• Usage and Example at Mozilla Developers Network
• Implementation of a touch-friendly pure CSS dropdown