[Résolu] Menu qui ne fonctionne pas à cause du formulaire

Bonjour,

J'ai un gros soucis avec une seule page de mon site.

Pour la version mobile, j'ai un menu exprès en haut de mes pages (qui remplace la version desktop) et qui slide vers le bas pour afficher les liens. Çà fonctionne très bien sauf sur la page où il y a mon formulaire.

Le bouton menu apparaît en tout petit complètement collé en haut et il ne fonctionne pas du tout comme l'image ci-dessous :



Il y a donc un conflit entre les deux fichiers CSS et je soupçonne que ça vient de la checkbox mais je ne parviens pas à résoudre le problème.

Voici mon code HTML de mon menu :

<div class="nav">
	<input id="nav-toggle-button" type="checkbox" class="trigger" />
	<label class="icon" for="nav-toggle-button">
		<i class="fa fa-bars"></i> Menu
	</label>

	<nav class="main">
		<ul>
			<li><a href="index.php" class="nav_link">Accueil</a></li>
			<li><a href="prestations.php" class="nav_link">Prestations</a></li>
			<li><a href="localisation.php" class="nav_link">Localisation</a></li>
			<li><a href="contact.php" class="nav_link">Contact</a></li>
		</ul>
	</nav>
</div>

Le CSS du menu :

/* RESOLUTION 960px MAX */
@media only screen and (max-width: 960px)
{
	.menu, .br2 { display :none; }

	.nav { display :block; }

	label.icon {
		position: relative;
		background :transparent;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
		display: inline-block;
		z-index: 2;
		width: 100%;
		font-family: 'Titillium Web', sans-serif;
		color: #4bb5f2;
	}

	.nav {
		position: relative;
		text-align: center;
		background :url("images/fond_contenu.png") repeat;
		width :70%;
		margin :auto;
		border-radius :0px 0px 8px 8px;
	}

	nav.main {
		top: -250px;
		left: 0;
		overflow: hidden;
		position: absolute;
		width: 100%;
		background :url("images/fond_contenu.png") repeat;
		transition: .9s all ease;
		z-index: 1;
		border-radius :8px 8px 8px 8px;
		font-family: 'Titillium Web', sans-serif;
	}

	.nav input[type="checkbox"] { display: none; }

	.nav input[type="checkbox"]:checked ~ nav.main {
		top: 40px;
		height: auto;
	}

	nav ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		list-style: none;
		text-align: center;
		margin: 0;
		padding: 13px;
		font-size: 20px;
	}

	nav li a {
		text-decoration: none;
		color: white;
	}

	.nav_link {
		display: inline-block;
		text-decoration: none;
	}

	.nav_link:after {
		border-bottom: 3px solid #5fd072;
		content: "";
		display: block;
		margin: 0.25em auto 0;
		transition: width 250ms ease-in-out 0s;
		width: 0;
	}

	.nav_link:hover:after {
		transition: width 100ms ease-in-out 0s;
		width: 100%;
	}

	/* MEDIA QUERIES */
	/* RESOLUTION JUSQUE 800px MAX */
	@media only screen and (max-width: 800px)
	{
		.nav { width :100%; }
	}

	/* RESOLUTION DE 801 px JUSQUE 960px MAX */
	@media only screen and (min-width: 801px) and (max-width: 960px)
	{
		.nav { width :80%; }
	}
}

Et le CSS du formulaire :

* { box-sizing:border-box; }

/* basic stylings ------------------------------------------ */

.container {
	width:80%;
	margin:30px auto 0;
	display:block;
	padding:10px 50px 50px;
}

/* form starting stylings ------------------------------- */
.group {
	position:relative;
	margin-bottom:45px;
}

fieldset {
	border:1px solid;
	border-radius:8px;
}

textarea { height :200px; }

input, textarea {
	width :500px;
	font-size:18px;
	padding:10px 10px 10px 5px;
	display:block;
	border:none;
	border-bottom:1px solid #4bb5f2;
	background :transparent;
}

input[type=file] { font-size: 15px; }

input:focus, textarea:focus { outline:none; }

.buttons { text-align: center; }

input[type=submit] { 
	display :inline-block;
	width :150px;
}

input[type=submit]:hover, input[type=reset]:hover {
	color :#ff9f9f;
	cursor:pointer;
}

input:focus:valid {
    border-color: #b3f3a2;
    box-shadow: 0 0 1px #b3f3a2;
}

input:focus:invalid {
    border-color: #ffffff;
    box-shadow: 0 0 1px #f79c9c;
}

/* LABEL ======================================= */
label {
	color:#4bb5f2;
	font-size:18px;
	font-weight:normal;
	position:absolute;
	pointer-events:none;
	left:5px;
	top:10px;
	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~label {
	top:-20px;
	font-size:14px;
	color:#5fd072;
}

/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:500px; }

.bar:before, .bar:after {
	content:'';
	height:2px;
	width:0;
	bottom:1px; 
	position:absolute;
	background:#5fd072;
	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
}
.bar:before {
	left:50%;
}
.bar:after {
	right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after, textarea:focus ~ .bar:before, textarea:focus ~.bar:after {
	width:50%;
}

input, textarea, input:hover, input:focus, textarea:hover, textarea:focus { color :#4bb5f2; }

/* HIGHLIGHTER ================================== */
.highlight {
	position:absolute;
	height:60%;
	width:100px;
	top:25%; 
	left:0;
	pointer-events:none;
	opacity:0.5;
}

/* active state */
input:focus ~ .highlight, textarea:focus ~ .highlight {
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
}

::placeholder {
	text-align :right;
	font-size :15px;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
	to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
	to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
	to { width:0; background:transparent; }
}

/* RESOLUTION 1024px MAX */
@media only screen and (min-width: 600px) and (max-width: 1024px)
{
	.container {
		margin :0 auto;
		padding :0;
	}

	input, textarea, input:hover, input:focus, textarea:hover, textarea:focus, input[type=submit], input[type=reset] { font-size :15px; }
}
/* RESOLUTION 420px MAX */
@media only screen and (min-width: 320px) and (max-width: 420px)
{
	.container {
		width :100%;
		margin :0;
		padding :0;
	}

	label { font-size :15px; }

	textarea { height :150px; }

	input, textarea { width :100%; font-size :15px;}

	input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~label { font-size:12px; }

	input[type=submit], input[type=reset] { width :30%; }

	.bar { position:relative; display:block; width:100%; }

	::placeholder { font-size :10px; }

	input[type=file] { font-size: 12px; }
}

Je pense que malgré qu'il n'y ai pas de checkbox dans mon formulaire, le CSS prend en compte celui du menu. J'ai tenté en remplaçant chaque input par input[type="xxx"] pour bien préciser de quels input il s'agit mais ça fonctionne en partie car le type tel n'est pas prit en compte.

Je vous remercie d'avance.
Modifié par Xhanxhand (21 Dec 2019 - 12:05)

J'ai recopié votre code dans un Codepen. Sans retouche, votre menu ne se déplie pas sur une petite résolution.

Avant toute chose, voici ce que j'observe:
* lorsque vous intégrez des propriétés avec des préfixes propriétaires, commencez par ces déclarations et finissez par le standard générique (là vous faîtes l'inverse pour les transitions).
* <nav> est par défaut de type block*
* il y a redondance avec la propriété text-decoration ; vous lui donnez la même valeur pour .nav_link et nav li a

Sinon votre problème vient que dans le css il est définit

label {
pointer-events: none;
}

Ce qui empêche de cocher la checkbox de votre menu. Ajoutez pointer-events: auto à .trigger et ce deviendra à nouveau fonctionnel
Modifié par Greg_Lumiere (21 Dec 2019 - 21:38)

Si vous parlez de la page contenant le formulaire, en effet, le menu ne se déplie pas du tout (au contraire des autres pages).

J'ai rajouté le code suivant dans le CSS qui gère le menu :

.trigger { pointer-events: auto; }

Rien n'a changé. Le bouton n'a pas l'aspect qu'il devrait avoir et bien sur, il ne se déplie pas.

Meaculpa je me suis fourvoyé, en fait ce n'est pas .trigger qui est concerné par cette propriété mais nav > label.icon

Ce n'est pas grave. Cela arrive de se tromper et vu vos connaissances, on ne peut pas vous en tenir rigueur.

Sinon, le menu fonctionne bien. Il me reste plus qu'à trouver l'astuce pour que l'aspect soit correct.

Voici à quoi ça ressemble sur les autres pages :



HS : vous m'aviez dit que les float sont has been. Je me suis renseigné et je vais tenter avec les flexbox. D'après ce que j'ai lu, ça me semble plus... flexible^^

Bonjour,

Je crois que j'ai supprimé le pen sur lequel j'avais testé hier et franchement j'ai la flemme de le refaire lol
En ce qui concerne votre formulaire et sa personnalisation. Moi j'ai pris pour habitude de travailler par composant et votre formulaire me semble bien en être un. Si je peux me permettre, vous devriez apposer une classe à celui-ci et ensuite vous en servir pour sa personnalisation en préfixant toutes vos déclarations par la classe de votre formulaire.
Ainsi vous éviterez les effets de bords tels que ceux que vous observez pour votre menu.
Bien sûr, vous sortirez de ce contexte les propriétés universelles (par exemple si tous vos labels, partout dans le site et quelque soit le contexte doivent avoir une hauteur de 2rem vous sortirez cette propriété.

Soit un/des Csstel que:
- propriétés génériques (reset, propriétés figées quelque soit le contexte) ; c'est ici que vus placerez votre label { height: 2rem; }
- ... (gabarit etc)
- menu
- formulaire
- etc

Flexbox est maintenant suffisamment mature pour être intégré en production. Vous verrez, ce layou a quelque-chose de "magique" dont beaucoup ici semble être tombés amoureux

Pour les différents CSS, c'est un peu près ce que je fais.

J'en ai un global pour les éléments fixent et qui se répètent à chaque page. Ensuite, j'ai un CSS concernant le menu en version mobile. Puis des CSS pour les parties n'apparaissant que sur une seule page (le formulaire et la liste à puce déroulante).

Pour le formulaire, si j'ai bien compris, il faut que je désigne un préfixe et que je l'applique à chacune des classes le concernant. Est-ce bien cela ?

Sinon, je viens de remplacer mes float, pour mon pied de page, par des flexbox et c'est magique. Bien sur, je ne maîtrise pas totalement mais j'en ai compris l'essentiel et c'est impressionnant la flexibilité de cette fonction (d'où son nom d'ailleurs).
Je me suis prit la tête pour la mise en forme pendant un bon moment avec mes float, là, j'y suis arrivé rapidement en sachant que je viens seulement d'apprendre.

Xhanxhand a écrit :
Pour les différents CSS, c'est un peu près ce que je fais.

J'en ai un global pour les éléments fixent et qui se répètent à chaque page. Ensuite, j'ai un CSS concernant le menu en version mobile. Puis des CSS pour les parties n'apparaissant que sur une seule page (le formulaire et la liste à puce déroulante).

Nickel !

Xhanxhand a écrit :
Pour le formulaire, si j'ai bien compris, il faut que je désigne un préfixe et que je l'applique à chacune des classes le concernant. Est-ce bien cela ?

Perso je fais ainsi comme ça je n'ai aucun soucis:

<style>.myform label {...}
.myform input {...}
</style>
<form class="myform">
</form>

Xhanxhand a écrit :
Sinon, je viens de remplacer mes float, pour mon pied de page, par des flexbox et c'est magique. Bien sur, je ne maîtrise pas totalement mais j'en ai compris l'essentiel et c'est impressionnant la flexibilité de cette fonction (d'où son nom d'ailleurs).
Je me suis prit la tête pour la mise en forme pendant un bon moment avec mes float, là, j'y suis arrivé rapidement en sachant que je viens seulement d'apprendre.

Il est sur Alsa - ce doit être dans la section des tutoriels css - un pense bête à ce propos. Il s'agit d'un fichier pdf. Je vous suggère de vous le placer sous le coude car le module Flexbox, hé bien vous allez y revenir souvent hihihi
(notez que la même feuille existe pour grid )

J'ai suivi votre conseil et... Ça fonctionne =)

J'ai ajouté un préfixe 'myform' pour le formulaire en l'ajoutant en conséquence dans le CSS et j'ai fait pareil avec le menu en utilisant 'mymenu'. Là, miracle, tout est bon.

Du coup, j'ai compris, grâce à vous, que l'on peut utiliser la class parent pour se simplifier la vie. C'est pratique pour éviter de devoir à chaque fois ajouter une classe pour des listes par exemple. Je vais d'ailleurs regarder mon code HTML de près pour le simplifier à ce niveau là.

Pour le soucis de l'icône représentant le menu qui n'apparaissait pas, c'est simplement que j'avais oublié de rajouter dans le <header> le lien vers le fichier CSS de Font Awesome. D'ailleurs, je vais regarder comment ajouter moi-même cette icône. Je n'aime pas trop dépendre d'un autres 'services' (pour cette raison que j'évite JQuery et Bootstrap). Il suffit d'une panne et tous les sites utilisant ces services auront des problèmes.

Greg_Lumiere a écrit :

Il est sur Alsa - ce doit être dans la section des tutoriels css - un pense bête à ce propos. Il s'agit d'un fichier pdf. Je vous suggère de vous le placer sous le coude car le module Flexbox, hé bien vous allez y revenir souvent hihihi
(notez que la même feuille existe pour grid )

Hello,

En effet, ces deux pense-bêtes peuvent être trouvés dans notre section Guidelines : https://www.alsacreations.com/outils/guidelines/

Bonne lecture et excellente fêtes de fin d'année à vous

Ha merci beaucoup Raphael. Ce sera sûrement très utile.