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

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
fra
Le #26350853
Fra
Je pense rechanger le style dans le onclick (aide souhaitée...)



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 ?
--
Fra
fra
Le #26350918
Fra
Fra
> Je pense rechanger le style dans le onclick (aide souhaitée...)

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 ?



J'ai essayé aussi le script :
document.onclick = function() {
document.getElementById("sousmenu").style.visibility = "hidden";
}
pour que le sousmenu se referme quand on clique n'importe où.

Mais le problème c'est qu'une fois "hidden", le :hover ne le repasse pas
en "visible".

Pooouuurquoiii ? :../
--
Fra
fra
Le #26350960
Fra
<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>



Tiens c'est bizarre, je viens de tester sous IE8. Une seule des divs
'infos' veut bien s'ouvrir ; script jquery : function montrer(id) {
$("#"+id).slideDown( "slow", CalcLargImg );}

Dès que je clique sur un 2è item juste un ligne apparait.

Quant à IE6, le menu :hover ne se déroule même pas !


Je ne me souvenais pas que c'était aussi rustique IE !
--
Fra
SAM
Le #26351527
Le 01/05/15 13:30, Fra a écrit :
Fra
Je pense rechanger le style dans le onclick (aide souhaitée...)



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 ?



faut p't'et' ressortir/ré-entrer sur le menu ?



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26351525
Le 01/05/15 19:32, Fra a écrit :
Fra
Fra
Je pense rechanger le style dans le onclick (aide souhaitée...)



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 tu n'as pas prévu de CSS avec ce cas de figure ?

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


J'ai essayé aussi le script :
document.onclick = function() {
document.getElementById("sousmenu").style.visibility = "hidden";
}
pour que le sousmenu se referme quand on clique n'importe où.

Mais le problème c'est qu'une fois "hidden", le :hover ne le repasse pas
en "visible".

Pooouuurquoiii ? :../





Bien que cette solution (le onclick) soit très moche (du JS pour
contrecarrer des CSS !!! et allonzy-allonzo pour les rustines !),
essayer (sans garantie) :

document.onclick = function() {
document.getElementById("sousmenu").style.visibility = "";
}

ainsi, à mon idée, on supprime l'instruction JS donnée précédemment et
on doit revenir en mode "naturel" (en mode CSS quoi)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26351530
Le 01/05/15 21:18, Fra a écrit :

Quant à IE6, le menu :hover ne se déroule même pas !



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

et encore !
et bien évidemment, uniquement celles liés aux A
:link
:visited
:active
:hover

Attention !
l'ordre de déclaration de ces pseudos est important !!!
« la règle A:hover doit être placée après A:link et A:visited »
C'est valable pour tous les navigateurs !!!!

Je ne me souvenais pas que c'était aussi rustique IE !



Les IE sont débiles !!!

Pas certain que les nouveaux (≥ 9 ?) aient vraiment tout compris des CSS
!! ou même de ce qu'est l'attribut "ID" ... ? ! ?



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
fra-PasDeSp
Le #26351565
SAM
Le 01/05/15 21:18, Fra a écrit :
>
> Quant à IE6, le menu :hover ne se déroule même pas !

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).


> Je ne me souvenais pas que c'était aussi rustique IE !

Les IE sont débiles !!!

Pas certain que les nouveaux (≥ 9 ?) aient vraiment tout compris des CSS
!! ou même de ce qu'est l'attribut "ID" ... ? ! ?



J'ai réussi à faire marcher le site sur IE8 ; je pense que je vais
laisser tomber IE6.

--
Fra
fra-PasDeSp
Le #26351566
SAM
faut p't'et' ressortir/ré-entrer sur le menu ?



Essayé sans succès.
--
Fra
fra-PasDeSp
Le #26351567
SAM
>> 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 tu n'as pas prévu de CSS avec ce cas de figure ?



Bein y'a le CSS du hover et le normal (pas hover).


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" !
--
Fra
fra-PasDeSp
Le #26351564
Fra
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 ?



Bon il s'avère que le hover veut bien se refermer sur tactile si on
clique/tape sur un élement "actif". Du coup j'ai rendu actif tout le
texte derrière/à coté pour qu'un clique le passe du noir ...au noir.
Sauf qu'avec le "même noir" ça ne faisait rien, j'ai du demandé que ç
apasse de #000 à 'black' !!
--
Fra
Publicité
Poster une réponse
Anonyme