Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP Menu déroulant:hover qui ne se referme pas sur tactile

Menu déroulant:hover qui ne se referme pas sur tactile

18 réponses
Avatar
fra
Hello

Soit un menu de haut de page dont un des items est un menu déroulant...
lors d'un hover.
J'ai laissé la ligne avec le hover dans le css général (les autres sont
dans un media query pour grands écrans) puisque le menu marchera aussi
sur tactile en cliquant.

Mais ce menu ne se referme pas quand on clique sur un item ou en dehors
du menu.

Par quelle petite astuce simple puis-je résoudre cela ?

L'item de menu problématique :

<div class="rubrique">
<a href="#nogo">Informations</a>
<div class="sousmenu">
<div class="pagesousmenu">
<a href="#infos1" onclick="montrer('infos1')">Bla</a>
</div>
<div class="pagesousmenu">
<a href="#infos2" onclick="montrer('infos2')">BlaBla</a>
</div>
<div class="pagesousmenu">
<a href="#infos3" onclick="montrer('infos3')">BluBlu</a>
</div>
</div>
</div>

et les styles pour l'apparition :

.sousmenu { opacity:0; visibility:hidden; top:0 }
.rubrique:hover .sousmenu { opacity:1; visibility:visible; top:46px }

Je pense rechanger le style dans le onclick (aide souhaitée...) mais ça
ne résoud pas le pb si on ne choisit rien et on tapotte en dehors du
menu pour essayer de le refermer.
Existerait-il un OnTouch"out/leave" à mettre sur la div rubrique qui
détecterait un tap en dehors ?

Merci d'avance pour votre aide.
--
Fra
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
fra-PasDeSp
Fra wrote:

> Les anciens IE (IE < 8 ?) ne connaissent les pseudo-classe que pour les A
>

Effectivement le hover est sur une div (bein qu'elle contienne juste un
lien).



Le CSS est comme ça :
.rubrique:hover .sousmenu {opacity:1; visibility:visible; top:46px}

J'ai essayé de rajouter une ligne comme ça :
.rubrique > a:hover .sousmenu {opacity:1; visibility:visible; top:46px}

mais ça n'a rien donné de plus.
--
Fra
Avatar
SAM
Le 06/05/15 18:27, Fra a écrit :
Fra wrote:

Les anciens IE (IE < 8 ?) ne connaissent les pseudo-classe que pour les A





J'ai essayé de rajouter une ligne comme ça :
.rubrique > a:hover .sousmenu {opacity:1; visibility:visible; top:46px}

mais ça n'a rien donné de plus.



ça ne peut pas marcher puisque le 'sous-menu' n'est pas dans le A !



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra-PasDeSp
SAM wrote:

ça ne peut pas marcher puisque le 'sous-menu' n'est pas dans le A !



OK. Je laisse tomber IE6 alors.
--
Fra
Avatar
SAM
Le 06/05/15 20:04, Fra a écrit :
SAM wrote:

ça ne peut pas marcher puisque le 'sous-menu' n'est pas dans le A !



OK. Je laisse tomber IE6 alors.



Normalement,
au clic sur un item de menu ça doit (toujours !) ouvrir une page
et on y trouvera le sous-menu en mode "normal"

le "hover" par CSS (ou/et JS) sur cet item de menu et qui révèle le
sous-menu permet juste de "sauter" cette page intermédiaire


Pour IE.6 et si on y tient, on peut mettre en place une béquille en
JavaScript (incluse dans un commentaire conditionnel)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 06/05/15 17:53, Fra a écrit :
SAM wrote:

Quand je change la 'visibility' en hidden du sousmenu lors d'un
'onclick' sur un item, cette 'visibility' ne repasse pas à 'visible'
lors d'un hover.
Pourquoi ?





parce que là c'est définitif ?
Le JS a définitivement modifié le style du machin-truc !!!!



C'est bizarre ça ce coté "définitif" !



D'une part du as une règle CSS qui s'adresse à un élément en position
"normale"
(hidden ou pas, on s'en moque tant que c'est son état "normal")
pour le modifier au survol.

Si le JavaScript modifie l'état "normal" de l'élément, la règle CSS n'y
pourra rien et le fait de quitter le survol ne fera pas revenir à la
position normale ancienne d'avant la modif par JS

Le JS doit donc comporter un truc pour revenir à la "normale" normale
d'avant


exemple :
CSS:
truc { background:orange; display:block; }
truc:hover { background:pink }

HTML :
<truc onmouseover="this.style.background='yellow';"
onmouseout="this.style.background='';">blabla JS</truc>
<truc> blabla "normal" </truc>
<truc onmouseover="this.style.background='lightgrey';">
blabla bancal
</truc>



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra-PasDeSp
SAM wrote:

Pour IE.6 et si on y tient, on peut mettre en place une béquille en
JavaScript (incluse dans un commentaire conditionnel)



Ca consiste en quoi un "commentaire conditionnel" ?
--
Fra
Avatar
SAM
Le 07/05/15 21:15, Fra a écrit :
SAM wrote:

Pour IE.6 et si on y tient, on peut mettre en place une béquille en
JavaScript (incluse dans un commentaire conditionnel)



Ca consiste en quoi un "commentaire conditionnel" ?



Ha! Oui!
C'est un truc spécifique à MinusculeMou !

Un commentaire tourné de telle manière qu'il n'y a que les IE qui en
lisent le contenu.

Conditionnel ===> SI blabla ALORS faire ceci SINON faire cela

Chez M$ :
<https://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx>
En plus français :
<http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html>


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
fra-PasDeSp
SAM wrote:

Le 07/05/15 21:15, Fra a écrit :
> SAM wrote:
>
>> Pour IE.6 et si on y tient, on peut mettre en place une béquille en
>> JavaScript (incluse dans un commentaire conditionnel)
>
> Ca consiste en quoi un "commentaire conditionnel" ?

Ha! Oui!
C'est un truc spécifique à MinusculeMou !

Un commentaire tourné de telle manière qu'il n'y a que les IE qui en
lisent le contenu.

Conditionnel ===> SI blabla ALORS faire ceci SINON faire cela

Chez M$ :
<https://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx>



Ah oui, j'en ai mis :

<!--[if lte IE 7]>Votre navigateur a plus de 10 ans, pour votre confort
de navigation mettez le à jour.<![endif]-->
<!--[if lt IE 9]><script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Mais comment on insère ça dans un lien ?
--
Fra
1 2