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

[Sébastien Dondeynaz <assistance@xxxxxxxxxx>]

Salut Yvan,

Est-ce que tu partage un dépôt sur un Git ? Je pourrais te faire les proposition direct ;-)
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) ! 
Essaye comme ça par exemple :

<div class='container nav-tree'>
  <header>
    <img src="" class='logo' alt="logo masson informatique" /><!--<h1><a href="" 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="" class='nav-item'>Particuliers</a>
    <a href="" class='nav-item'>Professionnels</a>
    <a href="" class='nav-item'>Engagements</a>
    <a href="" 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

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
>