Re: [technique] CSS/Javascript : ":hover" et iOS

[Yvan Masson <yvan@xxxxxxxxxxxxxxxxxxxxxx>]

Merci pour ta réponse Yuraï,

Le 26/11/2018 à 15:16, Sébastien Dondeynaz a écrit :
> Salut Yvan,
> 
> Est-ce que tu partage un dépôt sur un Git ? Je pourrais te faire les
> proposition direct ;-)
Mon site n'est pas géré par Git ou autre (je sais c'est mal).

> Sinon j'ai "plusieurs" propositions pour toi :-)
> Mais il général il s'agit de passer sur un menu horizontal (aussi pour
> des mobiles) !
Mon menu est déjà une liste qui s'affiche horizontalement ou
verticalement selon la place disponible. Le problème c'est "d'annuler"
le :hover affichant le sous-menu lorsque l'utilisateur iOS tapote en
dehors de celui-ci.

> Essaye comme ça par exemple :
> 
> <div class='container nav-tree'>
> <header>
> <img src="/theme/Masson-Informatique.png" class='logo' alt="logo masson
> informatique" /><!--<h1><a href="/">Masson Informatique - Services
> informatiques aux particuliers, entreprises et collectivités
> <strong></strong></a></h1>-->
> </header>
> <nav class='vertical-align-middle scroll'>
> <a href="/" class='nav-item'>Accueil</a>
> <a href="/pages/particuliers.html" class='nav-item'>Particuliers</a>
> <a href="/pages/professionnels.html" class='nav-item'>Professionnels</a>
> <a href="/pages/engagements.html" class='nav-item'>Engagements</a>
> <a href="/pages/contact.html" class='nav-item'>Contact</a>
> </nav>
> </div>
> 
> .logo {padding: 50% 1; width:100%; max-width:400px; height:auto;}
> nav {width:100%; white-space: nowrap; overflow-x: scroll;
> -webkit-overflow-scrolling: touch;}
> .logo,.nav-item,.vertical-align-middle {display: inline-block;
> vertical-align: middle;}
> .scroll {white-space: nowrap; overflow-x: auto;
> -webkit-overflow-scrolling: touch; -ms-overflow-style:
> -ms-autohiding-scrollbar;}
> .scroll::-webkit-scrollbar {display: none;}
> nav-tree .nav-item {padding: 12px 16px 13px; font-size: 14px; color:
> #f6f7ee;}
> .nav-item:not(:last-child) {border-right: 1px solid rgba(114, 124, 135,
> 0.2);}
> 
> Il faut rajouter encore un peut de styles, pour que c'est plus gros et
> plus lisible :P
J'ai essayé mais Firefox déclare certaines propriétés invalides :
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;

> 
> Bien cordialement,
> 
> Yuraï
>> Le 26 novembre 2018 à 13:48, Yvan Masson a écrit :
>>
>>
>> Bonjour à tous,
>>
>> Je suis en train de refaire mon site pro et j'ai grand peine à finaliser
>> un dernier détail.
>>
>> Pour y accéder c'est ici : https://pelican.masson-informatique.fr
>>
>> Le menu principal comporte un menu déroulant qui ne s'affiche que
>> lorsqu'on passe la souris dessus (propriété CSS ":hover"). Sur Android
>> et iOS, le :hover est bien déclenché lorsqu'on tapote sur l'image à
>> droite du menu déroulant. Par contre il n'y a qu'Android qui masque à
>> nouveau ce menu lorsqu'on tapote ailleurs : le menu reste visible "pour
>> toujours" sous iOS.
>>
>> Je préférerai une solution sans Javascript, ou de n'utiliser Javascript
>> que pour masquer à nouveau le menu.
>>
>> Merci d'avance,
>> Yvan
>>

Attachment: signature.asc
Description: OpenPGP digital signature