Développement iOS
  1. Développement iOS
  3. Menu déroulant sur les appareils tactiles
Intereting Posts
Où puis-je find un parsingur CSV to NSArray pour Objective-C? Problème avec le button sur le côté gauche de la barre d'uinavigation comment rejeter la feuille d'action avec un button personnalisé iOS ipsec désactiver le mode agressif PSK Combinaison d'autolayout avec l'animation de base Xamarin.iOS Designer – Création d'action segue ne fonctionne pas Détection des taps sur le text atsortingbué dans un UITextView dans iOS Tentative d'ajout d'un UIDatePicker en ligne à un UITableViewCell Catégorie Objective-C et nouvel iVar Swift Conversion de caractères en string Afficher la video à l'intérieur de l'Uiwebview pas en plein écran de l'appareil Swift 3 inputstream et outputtream se connectant mais pas de stream Définir un marqueur sur tous les autres marqueurs dans Google Maps SDK iOS mot-key réservé dans dynamodb – Swift 3 get indexPath de UITableViewCell sur un clic de Button from Cell

Menu déroulant sur les appareils tactiles

J'ai cette barre de navigation sur mon site Web et il ne tombe pas sur mon iPod touch, je soupçonne la même chose pour les iPhones et les iPads. C'est l'une des pages

Je me demandais s'il y a une solution rapide pour activer le toucher / stationnaire.

CSS

Si vous êtes intéressé par iDevices, vous pouvez utiliser cette astuce: 

#nav ul { display: none; /* Your styles */ } #nav > li:hover ul { display: block; } /* This is important */ #nav > li > a:hover { color: #fff; /* You can set the same color or add other style.*/ }

Si un élément a l'événement :hover , le premier appui iOS s'affiche :hover et le deuxième appui triggers l'événement click.

Cela devrait fonctionner.

PS Il est préférable de faire une logique d'interface user différente pour le mobile, le tactile et le bureau.

Il y a un bon article à ce sujet ici – http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

Je suggère d'utiliser Modernizr car il fournit une class CSS sans contact que vous pouvez utiliser pour les appareils à écran tactile, ou vous pouvez utiliser Javascript pour détecter les survols et append une class à votre élément. 

 if (!("ontouchstart" in document.documentElement)) { document.documentElement.className += " no-touch"; }

La solution la plus élégante que j'ai trouvée est Osvaldas Valutis

Sa méthode implique un plugin jQuery très minuscule pour détecter les events tactiles sur les éléments de la list de navigation avec les menus dropdown ul.

Par exemple, vous pourriez marquer votre navigation comme ceci: 

 <nav id="nav-primary"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a> <ul> <li><a href="/about/index.html">Dropdown item 1</a></li> <li><a href="/about/page.html">Dropdown item 2</a></li> </ul> </li> </ul> </nav>

Vous appelez ensuite le plugin avec une seule ligne de jQuery comme ceci: 

 $( '#nav-primary li:has(ul)' ).doubleTapToGo();

Cela garantit que le lien Accueil dans l'exemple ci-dessus fonctionne toujours comme prévu, car il ne dispose pas d'un drop down menu. Le seul inconvénient (très mineur) est qu'il y a un peu de redondance dans le premier lien sur la list déroulante, mais cela ne fait pas de mal.