Bonjour,

Je cherche à cacher mon Menu hamburger lorsque le lien du menu est cliqué ...

nav {
    display: none;
}

.menu-btn:checked ~ nav {
   display: inline-block; /* Affichage du menu */
   width: 100%;
   background-color: #FFF;
}

nav li a:active ~ nav {
   display: none;
}

Comment sélectionner le nav quand on clic le a ?

Biensûr je cherche la solution uniquement en CSS, pas de javascript ;-)

Merci de vos conseils

Marie

-
Edité par Marie FRO 13 juin 2019 à 14:49:52

Salut,

ça mettonerait que tu puisse le faire seulement en CSS, on ne peut pas remonter normalement.

Mais ça serait plus clair avec ton code html.

Ensuite, normalement si tu clic sur le lien tu es redirigé vers une autre page et ton burger devrait être fermé.
C'est une onepage ?

Pitié, enlève le width:100% de nav...

-
Edité par Frogweb 13 juin 2019 à 15:20:49

Bonjour Frogweb,

OK j'ai viré le width:100% 

Oui c'est une One-page avec uniquement html et css

A priori c'est faisable ... voici mon HTML

<!-- HEADER - Entête -->
<header id="header">


<!-- HAMBURGER MOBILE -->
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>

<input class="menu-btn" type="checkbox" id="menu-btn"/>

<!--  MENU NAV -->
<nav>
<ul>
<li><a href=#>Accueil</a></li>
<li><a href="#Aventures">Aventures</a></li>
<li><a href="#Photo">Photo</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

et le CSS tu l'avais déjà, mais le voici sans width:100%

/* --- NAVIGATION  --------- */

	/* -- BOUTON Hamburger --*/
	.menu-icon {
		display: inline-block;
		padding: 28px;
		position: relative;
		user-select: none;
	}

	.nav-icon {
		background: #333;
		display: block;
		height: 2px;
		position: relative;
	  	transition: background .2s ease-out;
		width: 18px;
	}

	.menu-icon .nav-icon:before,.menu-icon .nav-icon:after {
		background: #333;
		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
	}

	.menu-icon .nav-icon:before {
		top: 5px;
	}

	.menu-icon .nav-icon:after {
		top: -5px;
	}

/* --- menu Mobile  ---*/
	nav ul {
	        display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		padding: 0;
		margin: 0;
	}
	nav li {
    		margin-top: 5px;
    	}
	nav li a {
		padding: 20px 10px;
	}
	nav {
		display: none;
	}

	.menu-btn:checked ~ nav {
	         display: inline-block; /* Affichage du menu */
		background-color: #FFF;
	}
	nav li a:active ~ nav {
		display: none;
	}

Merci de votre aide 

En CSS tu ne peux pas remonter dans le code.
Avec ce code :

nav li a:active ~ nav {
		display: none;
	}

 tu dis : quand je clic sur le <a> va cacher quelque part plus bas un de mes frères qui est une nav.
L'important ici c'est plus bas...

Donc c'est impossible.

Et même si ça fonctionnait, :active c'est le moment pendant lequel tu clique sur le <a> c'est à dire tant que tu appuies sur le bouton de la souris.
En gros, en quelques millisecondes ta nav disparaîtrait et reviendrait.
Il ne faut pas confondre avec une classe .active ou autre qu'on voit des fois et qui ait générée en JS.

Donc, à moins que quelqu'un trouve une solution (j'en doute humblement) tu ne fera ça qu'en JS.

Ok merci quand même !

Tant pis !