28111 sujets

CSS et mise en forme, CSS3

Menu hamurger qui ne se referme pas

Bonjour,

J'ai crée mon "menu burger" et il s'ouvre très bien comme suit :

upload/1531401568-69591-sanstitre.png

Par contre si je reclique sur le menu en haut il ne se referme pas... Une petite idée pour ajouter quelque chose au CSS pour que ce soit le cas ? Je laisse mon CSS :

nav
	{
		padding: 2px;
		float:right;
		text-align: left;
	}
	nav ul
	{
		text-align: center;
		padding: 0px;
		margin: auto;
	}
	nav li
	{
		margin-left: 1px;
	}	
	nav a 
	{
		font-size: 1.4em;
	}	
	nav li a
	{
		margin: auto;
	}
	a#menu-icon
	{
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 0.5em;
	}
	#iconresponsive
	{
		width: 40px;
		height: 40px;
	}
	nav ul, nav:active ul 
	{ 
		display: none;
		position: absolute;
		background: #fff;
		right: 0;
		top: 60px;
		width: 100%;
	}
	nav li 
	{
		text-align: center;
		width: 100%;
		margin: 0;
	}
	nav:hover ul 
	{
		display: block;
	}
	header
	{
		display: block;
		margin: auto;
		width: 100%;
		left: 0;
		z-index: 1;
	}

Modifié par Cadi09 (12 Jul 2018 - 15:22)
A défaut de donner le code HTML, tu pourrais donner l'URL de "ton cher répertoire" Smiley cligne
En cliquant à côté du hamburger, le menu se replie.

Il faut utiliser un <input type="checkbox" />
Dans ton code HTML, remplacer :
<nav>
   <a href="#" id="menu-icon"><img src="Images/menuicon.png" alt="menu icon" id="iconresponsive"></a>
    <ul>

par : 
<nav>
    <input type="checkbox" id="chk-menu"> 
    <label for="chk-menu" id="menu-icon">
       <img src="Images/menuicon.png" alt="menu icon" id="iconresponsive">
     </label>
    <ul>
.....

et rajouter les règles CSS suivantes dans Style.css :
#chk-menu { display: none; }
#chk-menu:checked ~ ul { display: block; }

Mettre en commentaires vers la ligne 234 comme ceci :
/*
nav:hover ul {
    display: block;
}
*/

Modifié par bazooka07 (12 Jul 2018 - 16:04)
Merci je vais tester ça !

Je pensais pas que le problème venait du html j'avoue comme j'avais absolument pas capté que ça se fermait en cliquant à côté ... d'où l'absence de données à ce niveau.
bazooka07 a écrit :
A défaut de donner le code HTML, tu pourrais donner l'URL de "ton cher répertoire" Smiley cligne
En cliquant à côté du hamburger, le menu se replie.

Il faut utiliser un &lt;input type="checkbox" /&gt;
Dans ton code HTML, remplacer :
&lt;nav&gt;
   &lt;a href="#" id="menu-icon"&gt;&lt;img src="Images/menuicon.png" alt="menu icon" id="iconresponsive"&gt;&lt;/a&gt;
    &lt;ul&gt;

par : 
&lt;nav&gt;
    &lt;input type="checkbox" id="chk-menu"&gt; 
    &lt;label for="chk-menu" id="menu-icon"&gt;
       &lt;img src="Images/menuicon.png" alt="menu icon" id="iconresponsive"&gt;
     &lt;/label&gt;
    &lt;ul&gt;
.....

et rajouter les règles CSS suivantes dans Style.css :
#chk-menu { display: none; }
#chk-menu:checked ~ ul { display: block; }

Mettre en commentaires vers la ligne 234 comme ceci :
/*
nav:hover ul {
    display: block;
}
*/


J'ai essayé et cela ne fonctionne pas. D'ailleurs il ne trouve même plus l'image (menuicon) qui n'a pourtant pas changé d'endroit... un problème avec l'input ?!
De plus mon CSS est en deux parties je vais le remettre en entier car je n'avais copié que la partie faite pour le téléphone ça aidera forcément à comprendre :

/* En-tête */

header
{
	box-shadow: 0px 2px 4px grey;
	-webkit-box-shadow: 0px 2px 4px grey;
	-moz-box-shadow: 0px 2px 4px grey;
	margin: auto;
	top: 0px;
	width: 100%;
	position: fixed;
	max-width: 1200px;
	background-color: white;
	margin: auto;
	
}
#titre_principal
{
	display: inline-block;
}
#logo, header h1
{
	display: inline-block;
}
header h1
{
	font-family: 'Apalu', Arial, sans-serif;
	color: black;
	font-weight: normal;
	font-size: 2em;
}
#menu-icon
{
	display: none;
}


/* Navigation */

nav 
{	
display: inline-block;	
	vertical-align: top;	
	padding-top: 40px;
	float: right;
}
nav ul
{	
	list-style-type: none;	
	text-align: right;
	margin-top: 16px;
	line-height: 3.4em;
}
nav li
{	
	display: inline-block;
}
nav a
{	
	font-family: 'Apalu', Arial, sans-serif;
	font-size: 2.4em;
	color: black;
	text-decoration: none;
	margin-right: 1.25em;
	font-weight: normal;
}
nav a:hover
{
	text-decoration: underline;
	color: #646464;
}

/* differents medias */

@media all and (max-width: 1200px)
{
	nav
	{
		padding: 2px;
		float:right;
		text-align: left;
	}
	nav ul
	{
		text-align: center;
		padding: 0px;
		margin: auto;
	}
	nav li
	{
		margin-left: 1px;
	}	
	nav a 
	{
		font-size: 1.4em;
	}	
	nav li a
	{
		margin: auto;
	}
	a#menu-icon
	{
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 0.5em;
	}
	#iconresponsive
	{
		width: 40px;
		height: 40px;
	}
	nav ul, nav:active ul 
	{ 
		display: none;
		position: absolute;
		background: #fff;
		right: 0;
		top: 60px;
		width: 100%;
	}
	nav li 
	{
		text-align: center;
		width: 100%;
		margin: 0;
	}
	nav:hover ul 
	{
		display: block;
	}
	header
	{
		display: block;
		margin: auto;
		width: 100%;
		left: 0;
		z-index: 1;
	}
	#logo
	{
		display: none;
	}
	#titre_principal
	{
		width: auto;
		margin: auto;
		padding: 0.8em;
		margin-left: 0.9em;
	}
	#titre_principal h1
	{
		text-align: center;
		width: 100%;
		margin: auto;
	}
	#credits
	{ 
		font-size: 0.7em;
	}
}


Pour le lien vers mon site du coup si besoin c'est : www.mydeardiary.fr
Smiley fache Mobile first ! Smiley fache

Quand on rédige une feuille de style CSS, on commence par écrire les règles CSS qui s'appliquent aux smartphones ( ces pauvres petites machines avec un forfait 3G qui coûte un bras )
Ensuite on ajoute des correctifs à ces règles pour des écrans plus grands comme les tablettes ou les PC de bureaux avec des medias queries comme ceci :
/* on commence par les smartphones */
@media screen and (min-width: 48rem) {
    /* tablette */
    ......
}
@media screen and (min-width: 64rem) {
   /* mon beau PC de bureau */
    ......
}

Je n'avais pas examiné ta feuille de style :
Hélas, comme beaucoup trop de gens, tu as commencé par ton magnifique PC sur ton bureau. Puis après tu t'es occupée de la majorité des gens qui utilisent leurs smartphones pour aller sur Internet :
/* hélas, je commence par mon PC comme tout le monde */
   ........
@media all and (max-width: 1200px) {
/* Pour ceux qui des écrans tout petits
   .........
}

Pour éviter de refaire ta feuille de style, ajoute ceci pour voir le hamburger :
@media all and (max-width: 1200px) {
  	#menu-icon {
		display: block;
	}
}

Tu as déjà 2 "@media all and (max-width: 1200px)". Cela t'en fera 3 si tu ne fais de regroupement.

La prochaine fois que tu rédiges une feuille CSS, pour éviter d'avoir les yeux rivés sur un smartphone tu peux utiliser l'émulateur "responsive design" de Chrome (touches F12 et suivantes). Il va plutôt bien.
Et pour connaitre la largeur de l'écran connecte-toi sur https://mydevice.io en mode responsive design
Modifié par bazooka07 (13 Jul 2018 - 15:27)
Sujet clos
Aller à