Code de menu déroulant nécessaire pour les versions Web

Question

J'ai un site où dans la zone d'en-tête supérieure j'ai une liste déroulante qui ne fonctionne que lorsque l'utilisateur passe la souris dessus (http://liquor.com). Mais dans les versions mobiles, j'ai été informé que ce comportement ne fonctionnera pas. Donc, je vais mettre une instruction conditionnelle dans le code et afficher un autre menu déroulant, mais je suis curieux de savoir quel code devrait être utilisé pour une liste déroulante mobile.

Toute aide serait grandement appréciée.

Answer 1

Vous pouvez essayer ceci: http://css-tricks.com/unobtrusive-page-changer/

Answer 2

Parce que les plates-formes mobiles ne peuvent pas: hover, vous devez lier le menu déroulant pour cliquer sur les événements au lieu.

suivre Fondamentalement cette procédure pour créer un menu déroulant:

• capture l'événement de clic pour les liens de navigation haut rang (parce que les utilisateurs ne peuvent pas planer)
• Prévenir par défaut (navigateur chargement nouvelle page)
• Chargez le sous-menu approprié en fonction du lien top-nav sélectionné.
• Supprimer le sous-menu quand il perd le focus (utilisateur clique sur la page ou un autre haut-nav-link)

Answer 3

je CSS pur (pas de javascript à tous) menus déroulants 2-niveau qui travaillent sur au moins l'iPod touch, l'iPhone et l'iPad.

Tout ce qui était nécessaire était d'ajouter un gestionnaire onclick factice, si

<li><div class="menuheader">Reports</div> 
... </li> 

est devenu

<li><div class="menuheader" onclick="void(0)">Reports</div> 
... </li> 

Cela a été décrit dans l'entrée d'Apple Safari Reference Library pour Making Elements Clickable.