Menu déroulant:hover qui ne se referme pas sur tactile
18 réponses
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 ?
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 ?
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 <fra@alussinan.org> wrote:
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
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
Fra wrote:
Fra wrote:
> 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 <fra@alussinan.org> wrote:
Fra <fra@alussinan.org> wrote:
> 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".
> 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".
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
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
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 01/05/15 13:30, Fra a écrit :
Fra wrote:
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
Le 01/05/15 13:30, Fra a écrit :
Fra <fra@alussinan.org> wrote:
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
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 01/05/15 19:32, Fra a écrit :
Fra wrote:
Fra wrote:
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) :
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
Le 01/05/15 19:32, Fra a écrit :
Fra <fra@alussinan.org> wrote:
Fra <fra@alussinan.org> wrote:
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) :
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) :
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 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 » <http://www.yoyodesign.org/doc/w3c/css2/selector.html#x39> 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
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 »
<http://www.yoyodesign.org/doc/w3c/css2/selector.html#x39>
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
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 » <http://www.yoyodesign.org/doc/w3c/css2/selector.html#x39> 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
SAM wrote:
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
SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
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.
>> 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
SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> 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 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 !!!!
>> 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
Fra wrote:
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
Fra <fra@alussinan.org> wrote:
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
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
