[Résolu] Refermer menu :hover lors d'un clic

_laurent a écrit :
Ouais non ca a pas l'air concluant... en full CSS aucune idée en tout cas... apres, quitte a avoir du Js, autant tout faire en Js non ? Ca sera plus simple a gérer

gcyrillus a écrit :
Bonjour,

comme @_laurent te la suggérer , ce serait bien d'avoir ton code du menu dans un exemple fonctionnel dans son intégrabilité ... dans un codepen , c'est pratique et ça permet d'être raccord avec les défauts que tu as. (ton extrait de js montre une class enlevée puis remise 0.1 s plus tard , du moins c'est ce que je vois hors contexte)

Pour donner le focus à un élément, il faut qu'il soit focusable, les liens et éléments de formulaire interactif le sont, body ne l'est pas par défaut. Pour ajouter un élément à la liste des éléments focusable de ta page, tu peut leur attribuer l'attribut tabindex avec une valeur (sans valeur = aucun effet) à 0 par exemple.

Les menus CSS pour mobile, (classiques 'hamburger') s’appuient souvent sur un label et une checkbox pour passer d'un état à l'autre et appliquer une règle différente selon, sans avoir recours à JavaScript. As tu volontairement exclus cette option?

Cdt

<div class="monmenu">
                    <div class="smart-popin" id="popin2">
    <div class="sp-table">
        <div class="sp-cell">
            <div class="sp-body1">
            <ul>  					
			<li> <a href="#popin1">Biographie</a>
			<li> <a href="#goni">N'goni</a>
			<li> <a href="#seve">Sève montante</a>
			<li> <a href="#3/4">Trois temps quatre</a>
      			<li> <a href="#bala">Bala</a>
      			<li> <a href="#valse">Valse d'automne</a>			
      			<li> <a href="#foot">Contacts, copyright, mentions</a>
      			<li> <a href="https://musiquenvrac.fr/Blog">Blog musical</a>
			<li> <a href="#!">X</a>
</li>
	</ul>
            </div>
            <a href="#" class="sp-back" title="Revenir"></a>
 </div>
    </div>
       </div>
           </div> 

.smart-popin1 {
    position:fixed;
    left:0; right:0;
    top:0; bottom:0;
    overflow:auto; 
    opacity:0;
    z-index:100;
    visibility:hidden;
    transition: all 0.8s ease;}
.smart-popin:target {
    opacity:1;
    visibility:visible;
    transition:all 1s;}
.smart-popin .sp-table {
    display:table;
    height:100%;
    width:100%;}
.smart-popin .sp-cell {
    display:table-cell;
    vertical-align:middle;}
.smart-popin .sp-body   {
    position:relative; 
    width:86%;  
    margin:0 auto;
    padding:1em;
    text-align:center;
    font-size:1em;
    background-image:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));
    box-shadow:18px 18px 18px 16px rgba(0,0,0,0.55);
    z-index:9800;}
    	
#menubas {
	display:flex;
	justify-content:space-evenly;
	align-items: center;
	position:fixed;
	width:98%;
	height:3.4em;	
	bottom:0;
	padding-top:8px;
	background:white;
	transition: bottom 0.4s;
  	transition-delay: 0.2s;
	z-index:9000;}
#menubas.hidden {
  bottom: -80px;}
.monmenu {
	display:inline-block;
	position:fixed;
	top:5em;
	width:1em;
	height:1.1em;	  
    	font-size:1em;
	padding:0;}
li { 
    	display:flex;
    	justify-content: center;
    	position:relative;
    	width:14em;
    	height:2.4em;
    	top:0;
    	padding:6px;    
    	margin:auto;
    	border:solid 2px black;
    	border-radius:5px;
    	background:gray;}

<script>
    let header = document.querySelector("#menubas");
let lastScrollValue = 0;

document.addEventListener('scroll',() => {
		let top  = document.documentElement.scrollTop;
    if(lastScrollValue < top) {
    	header.classList.add("hidden");
    } else {
    	header.classList.remove("hidden");
    }
    lastScrollValue = top;
}); 
</script> 

#menubas.hidden {
  top: -80px;}

.rubrique_unhover { display: none; }

const z = document.querySelectorAll("div.rubrique");
z[0].classList.add("rubrique_unhover");
setTimeout(() => { z[0].classList.remove("rubrique_unhover"); }, 20);

document.body.addEventListener('touchstart', function(){}, false, {passive: true});

gcyrillus a écrit :
Bonsoir,

Merci pour le codepen, cela parait plus clair .

pour reprendre l'idée d'une checkbox parfois utilisée en se servant de classList.toggle() dans ton code, on peut faire quelque chose comme :

window.onload = fermermenu();
window.onresize = fermermenu();

function toggleMenu() {
  const y = document.querySelectorAll("div.sousmenu");
  y[0].classList.toggle("sousmenuvisible");
}

function fermermenu() {
  if (window.matchMedia("(max-width: 700px)").matches) {
    toggleMenu();
  } else {
    /* besoin de rien en principe desktop   ... */
    console.log("click");
  }
}

et en ajoutant la fonction fermermenu() aussi sur le lien informations. <a href="#nogo" onclick="fermermenu();">
Informations
</a>

https://codepen.io/gc-nomade/pen/xxXzPaV

Les pointer-events n'ont pas l'air d'avoir d'utilité ici.

C'est une autre piste

Cdt

kerlutinoec a écrit :


Petite question :
Si le toggleMenu se déclenche sur tactile, la fonction :hover n'aura pas lieu ???
(Ou faut-il que je la désactive entre 768 et 1366px ?)