Discussion :

[Marc31]

Bonjour à tous,

J'ai un menu qui s'ouvre lorsque la souris passe au dessus des boutons. Mais cela ne fonctionne pas lorsque c'est une tablette ou un portable. Donc j'aimerais mettre l'ouverture au clic de souris. Est ce faisable en html et css ?

[laurentSc]

Bonjour,
peux-tu donner STP le code du menu actuel ?

[Marc31]

Bonjour,

Voici la partie html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="menu-hor">
    <li><a href="https://.php">L'Asso</a>
        <ul>
            <li><img src="images/ombre.png" width="100%" height="40" align="center" alt="image ombre"></li>
            <li><a href="https://www...">Mot</a></li>
        </ul>
    </li>

et la partie css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#menu-hor ul li:hover{ /* ---hover permet de faire descendre le menu au survol de la souris--- */
border-radius:0;

[NoSmoking]

Bonjour,

Mais cela ne fonctionne pas lorsque c'est une tablette ou un portable.

cela ne devrait pas poser de soucis un « touch » sur tactile faisant office de « hover » !

A tester sur : Effet sur menu multi-niveaux

[Marc31]

Merci pour la réponse, du coup je remplace le hover par touch ?

[NoSmoking]

Non tu n'as rien à changer cela doit fonctionner en l'état.

[Marc31]

Cela ne fonctionne pas au niveau des tablettes et smartphones....

[Doksuri]

le hover n'existe pas sur moibiles

je te conseille d'utiliser des classes pour gerer les etats (surtout si tu vises le multi client)

#menu-hor ul li.open{ ... }et en JS, tu utilises l'event pointerup pour activer la classe

[Marc31]

Merci pour la réponse. Je ne sais pas si c'est bien, j'ai rajouté ontouchstart="" dans le body et cela fonctionne.

[NoSmoking]

Cela ne fonctionne pas au niveau des tablettes et smartphones....

On parle bien du lien que j'ai mis au post #4, je n'ai jamais observé de soucis il suffit, sur tactile, de toucher le menu pour voir l'effet opérer !

Je ne sais pas si c'est bien, j'ai rajouté ontouchstart="" dans le body et cela fonctionne

Tu gères cela comment, avec le CSS et/ou JS mais avec JavaScript autant utiliser tout de suite les pointerEvent

Ressources :

• Les événements de pointeur sur javascript.info
• PointerEvent sur MDN