Afficher/ Masquer une div

**BOU59000** · 14/10/2021, 17h42

Bonjour à toutes et à tous,

Tout d'abord, j'espère avoir poster au bon endroit... J'avoue avoir été un peu perdu

Sur mon site internet, je souhaite afficher ou masquer une div après avoir cliquer sur un bouton.
Cela me servira pour afficher/ masquer un menu navigation pour les versions smartphone (responsive).
Je n'ai jamais appris le javascript... car je n'en avais pas vraiment le besoin jusqu'à maintenant et mis à part ce menu, je ne sais pas si j'en aurais besoin davantage (en tout cas pas dans l'immédiat...)
Du coup, j'ai piocher ci et la dans mes lectures et... ca ne marche pas!

J'ai ajouté un bouton "Cliquez" dans ma barre de navigation. Le tag de ce dernier est: "Menu_Bouton_Nav_Mobile"
L'objectif est que ce dernier affiche/ masque la div "Nav_Mobile".
Sauf que rien ne se passe quand je clique sur le bouton

Le code pour le menu classique de navigation est le suivant:
Au format mobile, seuls "Menu_BlocMenu_Smart_0", "Menu_BlocMenu_0" et "Menu_Bouton_Nav_Mobile" sont affichés.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav>
	<div id = "Menu_BlocMenu_Smart_0">
		<p> Navigation:</p> 
	</div>
	<div id = "Menu_BlocMenu_0">
		<a href="index.php?page=1">Accueil</a> 
	</div>
	<div id = "Menu_Bouton_Nav_Mobile">
		<button id="Menu_Bouton_Nav_Mobile">Cliquez!</button>
	 </div>
	<div id = "Menu_BlocMenu_1">
		<a href="index.php?page=2">A</a> 
	 </div>
	<div id = "Menu_BlocMenu_2">
		<a href="index.php?page=3">B</a> 
	</div>
	<div id = "Menu_BlocMenu_3">
		<a href="index.php?page=4">C</a> 
	 </div>
	<div id = "Menu_BlocMenu_4">
		<a href="index.php?page=5">D</a>  
	 </div>
</nav>

Le menu qui est censé s'afficher quand je clique sur le bouton (la div "Nav_Mobile"):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id = "Nav_Mobile">
	<div id = "Menu_BlocMenu_Smart_0_Mob">
		<p> Navigation:</p> 
	</div>
	<div id = "Menu_BlocMenu_0_Mob">
		<a href="index.php?page=1">A</a> 
	</div>
	<div id = "Menu_BlocMenu_1_Mob">
		<a href="index.php?page=2">B</a> 
	 </div>
	<div id = "Menu_BlocMenu_2_Mob">
		<a href="index.php?page=3">C</a> 
	</div>
	<div id = "Menu_BlocMenu_3_Mob">
		<a href="index.php?page=4">D</a> 
	 </div>
	<div id = "Menu_BlocMenu_4_Mob">
		<a href="index.php?page=5">E</a>  
	 </div>
</div>

L'appel du script dans ma page html:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
 
        session_start(); // Permet d'utiliser les variables superglobales
 
?>
 
<HTML>
 
	<HEAD>
 
		<meta charset ="utf-8"/>
 
		<title> TITRE </title>
		<link rel="shortcut_icon" type="image/x-icon" href="Header/Logo.png"/>
 
		<link rel="stylesheet" href="style.css"/> <!-- Feuille de style principal -->
 
		<!-- Permet de fixer les éléments sur une partie de l'écran -->
		<style>
            html,
            body 
            {
              margin: 0;
              padding: 0;
            }
            header
            {
              position: sticky;
              top: 0;
              height: 11em;
            }
            nav
            {
              position: sticky;
              top: 12em;
            }
        </style>
 
	</HEAD>
 
	<BODY>
 
	    <script type="text/javascript" src="evenement.js"></script>
 
</BODY>

Et part défaut dans mon code css, je masque le menu:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
/* NAVIGATION_MOBILE */	
#Nav_Mobile
{
    display: none;
}

Je suis certain que j'ai laissé trainer une erreur (de débutant

) quelque part... sauf que je ne la trouve pas.

Pourriez-vous m'aider?

D'avance merci

**BOU59000** · 15/10/2021, 11h43

Bonjour

Je viens de me rendre compte que j'ai oublié de poster le code en js

Mon code initial en js était le suivant pour le script "evenement.js":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let Menu_Bouton_Nav_Mobile = document.getElementById("Menu_Bouton_Nav_Mobile"); // Bouton qui va ouvrir ou fermer ma div
 
let Nav_Mobile = document.getElementById("Nav_Mobile"); // Ma div
 
function Menu_Ouvrir_Fermer()
{
   if(getComputedStyle(Nav_Mobile).display != "none")
   {
      Nav_Mobile.style.display = "none";
    }
    else
    {
    Nav_Mobile.style.display = "block";
    }
};
Menu_Bouton_Nav_Mobile.onclick = Menu_Ouvrir_Fermer;

Ce dernier ne fonctionne pas...

J'en ai essayé un nouveau et... toujours sans résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let Menu_Bouton_Nav_Mobile = document.getElementById("Menu_Bouton_Nav_Mobile"); // Bouton qui va ouvrir ou fermer ma div
 
let Nav_Mobile = document.getElementById("Nav_Mobile"); // Ma div
 
Menu_Bouton_Nav_Mobile.addEventlistener("click", ()=>
{
    if(getComputedStyle(Nav_Mobile).display != "none")
    {
        Nav_Mobile.style.display = "none";
    } else 
    {
        Nav_Mobile.style.display = "block";
    }
})

La question du qu'est ce qui cloche reste intacte

PS: Je viens de tester le code js sur https://codepen.io/.
Le code fonctionne bien sur ce simulateur.
L'erreur ne viendrait donc pas du code.
Peut-être de l'appel du script. Mais je ne vois pas ce qui pourrait clocher cependant...
Si vous avez des idées je suis preneur

**NoSmoking** · 15/10/2021, 17h23

Bonjour,
plusieurs remarques pour commencer !

Ton menu mériterait d'être construit sans les <div> qui n'apportent rien. Tu peux les mettre dans une liste, <li> par exemple, mais cela n'ait pas également nécessaire. Faire est simple est l'ami du facile.

Pour connaître si un élément est visible ou non à l'écran inutile de passer par la méthode getComputedStyle un simple contrôle de l'offsetHeight est suffisant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function showHide(idElement) {
  const elem = document.getElementById(idElement);
  const height = elem.offsetHeight;
  elem.style.display = height ? "none" : "block";
}

On n'a pas une vue complète de ton code HTML-CSS, mais sache également que cela se traite en pure CSS, via les média-queries et que cela se trouve facilement avec les mots clé « Responsive Hanburger Menu ».

Un exemple parmis d'autres : Responsive hamburger menu - pure CSS #1.

Analyse tout cela et revient si tu as un soucis

**BOU59000** · 16/10/2021, 00h13

Bonsoir,

Tout d'abord merci pour ta réponse

Je vais être honnête avec toi, je n'ai pas tout compris pour le code que tu as placé.
Je dois encore regarder cela (et peut-être me mettre à lire un peu quelques cours de javascript!

)

En revanche je commence à faire mes recherches sur la piste du menu hamburger.
Je fatigue un peu pour ce soir, je vais stopper mes recherches.
Et je les reprendrai demain matin

Je te tiens informé de mes trouvailles et posterais mon code une fois terminé.
Pour l'heure, juste un grand merci à toi pour cette piste (sans le js) qui semble très prometteuse

Bonne soirée et à demain

**BOU59000** · 17/10/2021, 15h05

Bonjour,

Cela m'a pris un peu plus de temps que prévu et surtout...
J'ai découvert qu'il y a pas mal de notions de base que j'ai oublié ou dont je n'ai pas compris les subtilités...
J'ai refait un focus sur la différence entre class et id

Pour le moment, je n'ai retenu que id utilisé pour un seul bloc ou élément et class pour un groupe. J'imagine qu'il y a des subtilités derrière cela mais pour l'instant je ne les vois pas encore

Comme promis, voici le résultat de mon programme Menu grâce à tes pistes

:

L'idée:
Quand je passe en version Smartphone (1140px dans mon code),
Mon menu classique devient un menu type hamburger.
Avec un "Menu:" + "Sur quelle page le visiteur se situe <=> php" + liens vers les pages
En mode ordinateur (sup à 1140px), il ne reste plus que les liens vers les pages.

Code pour ma navigation:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<nav>
 
		<p id = "P_Nav_Menu"> Menu:</p>
 
		<?php
                
                        if(isset($_GET['page']) AND !empty($_GET['page']))
                        {
                                if($_GET['page'] == 1)
                                {
                                        echo "<p>A</p>";
                                }
                                if($_GET['page'] == 2)
                                {
                                        echo "<p>B</p>";
                                }
                                if($_GET['page'] == 3)
                                {
                                        echo "<p>C</p>";
                                }
                                if($_GET['page'] == 4)
                                {
                                        echo "<p>D</p>";
                                }
                                if($_GET['page'] == 5)
                                {
                                        echo "<p>E</p>";
                                }
                        }
                
                ?>
 
		<label for = "Menu_Smartphone">☰</label>
		<input type = "checkbox" id = "Menu_Smartphone"/>
 
		<div class = "Menu">
 
		<a href="index.php?page=1">A</a> 
 
		<a href="index.php?page=2">B</a> 
 
		<a href="index.php?page=3">C</a> 
 
		<a href="index.php?page=4">D</a> 
 
		<a href="index.php?page=5">E</a> 
 
		</div>
 
</nav>

La partie CSS:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
/* Navigation */
 
nav
{	
	display: flex;
	width: 100%;
 
	border-top: 1px solid;
	border-color: #045692;
 
	border-bottom: 3px solid;
	border-color: #045692;
 
	justify-content: center;
 
	background-color: #2f85c0;
 
}
 
	nav a
	{
		color: #FFFFFF;
 
		text-decoration: none; /*Enlever surlignage*/
 
		font-size: 1.2em;
	}
 
	nav p
	{
		color: #FFFFFF;
		font-size: 1.2em;
		margin: 0 30px 0 0;
		display: none;
	}
 
	/*Item de la navigation */
		/*Voir spécifiques ci-après pour les formats autre*/
 
/* MENU NAVIGATION RESPONSIVE */
 
#P_Nav_Menu
{
	Display: none;
}
 
.Menu a
{
	text-decoration: none;
	margin: 0 30px 0 0;
}
 
label
{
	margin: 0 0 0 30px;
	color: #FFFFFF;
	font-size: 1.2em;
	display: none;
}
 
#Menu_Smartphone
{
	Display: none;
}
 
/*-------------------------------------------------------------------------------------*/
/* Smartphones */
 
@media screen and (max-width:1140px) 
{
	/* MENU NAVIGATION RESPONSIVE */
	#P_Nav_Menu
	{
		Display: Block;
	}
 
		nav p
	{
	    font-size: 3em;
		Display: Block;
	}
 
		nav a
	{
	    font-size: 3em;
		Display: Block;
	}
 
		label
	{
	    font-size: 3em;
		Display: Block;
		cursor: pointer;
	}
 
	.Menu
	{
		text-align: center;
		width: 100%;
		Display: none;
 
	}
 
	.Menu a
	{
		display: block;
		border-bottom: 1px solid;
	}
 
	#Menu_Smartphone:checked + .Menu
	{
		Display: Block;
	}
 
	#Menu_Smartphone:checked + nav
	{
		flex-direction: column;
	}
}

Le code fonctionne bien.
Juste un point de design que je n'arrive pas encore à régler.
Quand le menu est fermé, les éléments sont sur une ligne "Menu + OU se trouve le visiteur + symbole ouverture menu"
Quand j'ouvre le menu, le menu s'ouvre mais tout se situe toujours sur une ligne

Alors que j'ai essayé de faire:
. Ligne du haut: Menu + Symbole
. En dessous: Le bloc avec tous les liens vers les pages (qui eux sont bien les uns à la suite des autres) (en mode colonne quoi...)

SI vous avez des idées de ou cela peut pécher...

D'avance merci à tous et toutes

**jreaux62** · 17/10/2021, 16h02

Bonjour,

Envoyé par BOU59000

J'ai refait un focus sur la différence entre class et id

C'est pourtant simple :

un id doit être UNIQUE : on ne peut le mettre que sur UN SEUL élément
une classe, au contraire, peut être utilisée sur PLUSIEURS éléments

**BOU59000** · 17/10/2021, 21h45

Bonjour,

Effectivement c'est ce que j'ai pu lire.
Ma question à ce sujet était relative à la portée de cette distinction.
Si la nuance existe, c'est qu'elle a une raison d'être.
C'est plus cela que j'essaie de comprendre. Cette raison d'être et ainsi son impact

Si tu as des idées sur ce qui peut bloquer au niveau du CSS je suis preneur.

Bonne soirée à toutes et à tous

**NoSmoking** · 18/10/2021, 11h06

Si tu as des idées sur ce qui peut bloquer au niveau du CSS je suis preneur.

• Tout d'abord il convient d'avoir une structure « HTML cohérente », ce qui l'est pour certains ne l'est pas forcément pour d'autres, alors que tu obtiens quelque chose comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<nav>
  <p id = "P_Nav_Menu"> Menu:</p>         <!-- ici tu as 2 éléments P -->
  <p>A</p>
  <label for="Menu_Smartphone">☰</label>
  <input type="checkbox" id="Menu_Smartphone" />
  <div class="Menu">
    <!-- tes liens -->
  </div>
</nav>

il serait préférable que tu obtiennes quelque chose comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<nav>
  <p id="P_Nav_Menu"> Menu: A</p>         <!-- ici tout dans le même élément P -->
  <label for="Menu_Smartphone">☰</label>
  <input type="checkbox" id="Menu_Smartphone" />
  <div class="Menu">
    <!-- tes liens -->
  </div>
</nav>

une fois ceci corrigé il y a plusieurs corrections à faire dans ton CSS.

• Ta balise <nav> :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
nav {
  position: relative;         /*-- pour servir de référend --*/
/*  display: flex;            /*-- à supprimmer --*/
/*  justify-content: center;  /*-- ne sert plus --*/
/*  width: 100%;              /*-- inutile, valeur par défaut --*/
  border-color: #045692;
  border-top: 1px solid;
  border-bottom: 3px solid;
  background-color: #2F85C0;
}

• Ton <label> de basculement :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
label {
  display: none;
  position: absolute;         /*-- position en haut à droite dans <nav> --*/
  top: 0;
  right: 0;
/*  margin: 0 0 0 30px;       /*-- pas utile --*/
  font-size: 1.2em;
  color: #FFF;
}

c'est pour le faire apparaître sur la ligne du dessus.

• Tant que l'on y est, pour tes liens <a> :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.Menu a {
/*  margin: 0 30px 0 0;       /*-- à remplacer par un padding --*/
  padding: 0 1.5em;
  text-decoration: none;
}

• Enfin pour la partie smartphone, je te mets tout d'un coup, pas bien de changement :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* Smartphones */
@media screen and (max-width:1140px){  /*-- 1140px me paraît une limite quand même élevée ! --*/
  /* MENU NAVIGATION RESPONSIVE */
  #P_Nav_Menu {
    display: block;
  }
  nav p {
    font-size: 3em;
    display: block;
  }
  nav a {
    font-size: 3em;
    display: block;
  }
  label {
    font-size: 3em;
    cursor: pointer;
    display: block;
  }
  .Menu {
  /*  width: 100%;              /*-- inutile, valeur par défaut --*/
  /*  text-align: center;       /*-- supprimer et ajout pour toute largeur de screen --*/
    display: none;
  }
  .Menu a {
    display: block;
    border-bottom: 1px solid;
  }
  #Menu_Smartphone:checked + .Menu {
    display: block;
  }
  #Menu_Smartphone:checked + nav {
/*    flex-direction: column;   /*-- plus utile --*/
  }
}

• Nota : prend l'habitude d'écrire tes déclarations, propriété-valeur en minuscule, même si ce n'est pas anti-fonctionnel c'est plus « CSS correct ».

A toi de jouer

PS : je déplacerais la discussion sur le forum CSS.

**BOU59000** · 18/10/2021, 17h25

Bonjour,

Merci pour ton retour détaillé

Je n'ai pas beaucoup de temps avec le travail... alors j'y vais progressivement.
J'ai parcouru les éléments sur la partie position:
https://developer.mozilla.org/fr/doc...ut/Positioning

Ce que j'en retiens:
Position => Static/Relative => Ne change pas le cours de la page.
Position: relative => génère un élément type flottant mais le cours de la page reste inchangé (donc la position de l'élément en relatif est "préservée".
Position: absolute/fixed => Sort l'élément du cours de la page. Fixe la position. Seul change le repère à partir duquel l'élément se fixe.
Position: sticky => un hybride qui reste dans le cours de la page mais qui s'en détache à partir de la position désirée.

Je dois encore éclaircir des choses dans mon esprit... la nuit porte conseil!

J'ai effectué les modifications de code que tu m'as préconisé.
Je perds le centrage de mes items de nav en site classique et l'html généré par mon php n'est pas centré non plus.
Je vais réfléchir à cela afin d'essayer de résoudre cela tout seul. Dès que j'aurai trouvé je poste (cela me permet d'apprendre de mes erreurs).

Merci pour tes réponses qui m'aident à comprendre progressivement la logique derrière le code.
Je laisse le sujet ouvert et reviens poster le code dès que le design correspond (d'ici 1-2 jours maxi suivant mes galères de compréhension

+ avec explications de ce que j'en aurai compris

)

**NoSmoking** · 19/10/2021, 13h52

Ce que j'en retiens:
( ... )

Attention toutefois de ne pas faire trop de raccourcis !

J'ai effectué les modifications de code que tu m'as préconisé.
Je perds le centrage de mes items de nav en site classique et l'html généré par mon php n'est pas centré non plus.

dans les modifications mentionnées je me rend compte que j'ai oublié de spécifié ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.Menu {
  text-align: center;         /*-- à ajouter centrage --*/
}

**BOU59000** · 21/10/2021, 10h38

Bonjour,

Merci pour ta réponse

Texte centré pour .Menu en mode classique.

Pour les raccourcis, j'essaie d'assimiler les infos mais au plus je lis sur le sujet au plus les choses deviennent "floues"

Par contre, je ne comprends plus trop.
Le code qui fonctionnait pour le menu responsive ne fonctionne plus

En mode responsive, j'ai de nouveau un décalage:
Menu: est plaqué à gauche, j'ai un écart là ou devrait se trouvait echo php, puis j'ai le label qui est plaqué vers la droite
Et sous Menu: (à la ligne), je retrouve mon echo php

J'ai essayé de décortiquer les différents éléments mais je ne comprends pas.
Je me suis posé pas mal de questions durant cette phase "décorticage" que je me suis permis d'inclure dans le code directement.
En gros, je suis un peu dans le brouillard là

Pour la partie HTML de la navigation:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<nav>
 
		<p id = "P_Nav_Menu"> Menu:</p>
 
		<?php
                
                        if(isset($_GET['page']) AND !empty($_GET['page']))
                        {
                                if($_GET['page'] == 1)
                                {
                                        echo "<p>A</p>";
                                }
                                if($_GET['page'] == 2)
                                {
                                        echo "<p>B</p>";
                                }
                                if($_GET['page'] == 3)
                                {
                                        echo "<p>C(s)</p>";
                                }
                                if($_GET['page'] == 4)
                                {
                                        echo "<p>D</p>";
                                }
                                if($_GET['page'] == 5)
                                {
                                        echo "<p>E</p>";
                                }
                        }
                
                ?>
 
		<label for = "Menu_Smartphone">☰</label>
		<input type = "checkbox" id = "Menu_Smartphone"/>
 
		<div class = "Menu">
 
		<a href="index.php?page=1">A</a> 
 
		<a href="index.php?page=2">B</a> 
 
		<a href="index.php?page=3">C</a> 
 
		<a href="index.php?page=4">D</a> 
 
		<a href="index.php?page=5">E</a> 
 
		</div>
 
</nav>

En résumé:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<nav>
   <p id ="P_Nav_Menu"></p> // S'affiche seulement en smartphone
   <p></p> // S'affiche seulement en smartphone
    <label> // S'affiche seulement en smartphone
    <input id = "Menu_Smartphone"> // A masquer dans tous les cas
    <div class = "Menu"><a href="#"></a></div> // S'affiche au format classique en mode inline, en mode smartphone en mode block
</nav>

Pour la partie CSS - code général:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* Navigation */
 
nav
{	
	position: relative;  /* Conserve le code dans le cours normal de la page - Peut on remplacer relative par static?  */
 
	border-top: 1px solid;
	border-color: #045692;
 
	border-bottom: 3px solid;
	border-color: #045692;
 
	background-color: #2f85c0;
 
}
 
	nav a
	{
		color: #FFFFFF;
 
		text-decoration: none; /*Enlever surlignage*/
 
		font-size: 1.2em;
	}
 
	nav p
	{
		color: #FFFFFF;
		font-size: 1.2em;
		margin: 0 30px 0 0;
		display: none; /* Permet de masquer les echo qui ne servent qu'en mode smartphone
	}
 
	/*Item de la navigation */
		/*Voir spécifiques ci-après pour les formats autre*/
 
/* MENU NAVIGATION RESPONSIVE */
 
#P_Nav_Menu
{
	Display: none; /* Permet de masquer le texte "Menu:" qui ne servent qu'en mode smartphone */
 
.Menu
{
    text-align: center; /* Permet de centrer le texte à l'intérieur de ma class Menu. Question: Peut on écrire directement cette ligne dans nav? */
}
 
.Menu a
{
    padding: 0 1.5em;
    text-decoration: none;
}
 
label
{
    display: none;
    position:absolute; /* On sort le label du cours normal de la page et on le place en haut à droite par rapport à nav */
	top: 0;
	right: 0;
	font-size: 1.2em;
	color: #FFFFFF;
}
 
#Menu_Smartphone
{
	Display: none; /* Input à masquer dans tous les cas */
}

Pour la version smartphone:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/*-------------------------------------------------------------------------------------*/
/* Smartphones */
 
@media screen and (max-width:1140px) 
{
	/* MENU NAVIGATION RESPONSIVE */
 
	#P_Nav_Menu
	{
		Display: Block; /* Affiche le texte "Menu:" */
	}
 
	nav p
	{
	    font-size: 3em;
            Display: Block; /* Affiche le texte écrit grâce au php avec echo */
	}
 
	nav a
	{
	    font-size: 3em;
	    Display: Block; /* Les a sont inclus dans .Menu, peut on supprimer la partie nav a car par héritage ce qui est écrit ici sera valable si nous l'écrivons dans .Menu? */
	}
 
	label
	{
	       font-size: 3em;
		Display: Block; /* Affiche le label */
		 cursor: pointer;
	}
 
	.Menu
	{
		display: none; /*Menu masque tant que l'input n'est pas coché */
	}
 
	.Menu a
	{
		 display: block; /*Les liens apparaissent que .Menu apparait. .Menu apparait en mode display:block. Par héritage, a sera en block aussi, on peut supprimer cette ligne du coup? */
		 border-bottom: 1px solid;
	}
 
	#Menu_Smartphone:checked + .Menu
	{
		Display: Block; /*Quand l'input est coché, le menu apparait est et en block. Pourquoi mon menu s'ouvre en dessous du label et occupe toute la place?  */
	}
}

Désolé cela fait beaucoup de questions. Cela me permet de construire/ consolider mes connaissances sur le sujet.

D'avance merci pour vos réponses

**NoSmoking** · 26/10/2021, 16h59

Par contre, je ne comprends plus trop.
Le code qui fonctionnait pour le menu responsive ne fonctionne plus

Il te faut construire ton menu, en partant de ton code, comme suit, comme indiqué dans mon post #3 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav>
  <p id = "P_Nav_Menu"> Menu:
  <?php
    if(isset($_GET['page']) AND !empty($_GET['page'])) {
      if($_GET['page'] == 1){ echo "A";}
      if($_GET['page'] == 2){ echo "B";}
      if($_GET['page'] == 3){ echo "C(s)";}
      if($_GET['page'] == 4){ echo "D";}
      if($_GET['page'] == 5){ echo "E";}
    }
  ?>
  </p>
  <label for = "Menu_Smartphone">☰</label>
  <input type = "checkbox" id = "Menu_Smartphone"/>
  <div class = "Menu">
    <a href="index.php?page=1">A</a>
    <a href="index.php?page=2">B</a>
    <a href="index.php?page=3">C</a>
    <a href="index.php?page=4">D</a>
    <a href="index.php?page=5">E</a>
  </div>
</nav>

avec les autres indications que je t'ai fournies tu auras « Menu : A » sur une ligne en écran réduit et tes lettres « A B C(s)... » centrées en écran large.

**BOU59000** · 27/10/2021, 15h40

Merci pour ton retour

Effectivement je me suis emmêlé les pinceaux en récrivant le code

Je continue mes tests.
Cela permet de continuer à appréhender un peu le tout.

J'ai essayé de jouer sur la largeur ainsi que sur la couleur de mon .Menu.
En code j'ai ajouté dans le CSS:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
	.Menu
	{
		display: none;
		background-color: yellow;
	        width: 90%;
	}
 
	#Menu_Smartphone:checked + .Menu
	{
		Display: Block;
	}

Quand je place ce code en mode classique et non smartphone, cela fonctionne.
En revanche en mode responsive, le .Menu reste à 100% de largeur et ne se colore pas en jaune pour la couleur d'arrière plan.
Ma prochaine étape d'apprentissage aurait été de le centrer en milieu de page

J'ai également voulu centrer <p id = "P_Nav_Menu"> Menu: + <label for = "Menu_Smartphone">☰</label> au centre de ma page.
Pour cela, je suis parti du principe que tout est dans mon Nav. Et que le principe de l'héritage sera bon pour mes éléments contenus dans nav du coup.
J'ai tenté d'ajouter cela dans le :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav
{	
	position: relative;
 
       display: flex; /*permet d'ajuster les blocs contenus dans nav*/
       justify-content: center; /* Pour centrer les blocs au centre de mon nav*/
 
  	border-top: 1px solid;
	border-color: #045692;
 
	border-bottom: 3px solid;
	border-color: #045692;
 
	background-color: #2f85c0;
 
}

Mais sans succès.

**jreaux62** · 27/10/2021, 16h49

Bonjour,

on ne peut rien faire avec des bouts de code éparpillés...

Mets une page en ligne, ou utilise codepen ou jsfiddle, pour qu'on puisse TESTER.

**BOU59000** · 28/10/2021, 12h41

Bonjour à tous

Bonne idée d'utiliser codepen

Cela m'a permis de:
. Me rendre compte que ce que j'utilise n'est pas du tout réactif...

. D'avoir la réactivité immédiate des modifications que je fais et d'en voir l'impact
. De pratiquer un peu dans mon coin

Le code d'origine:
https://codepen.io/BOU59000/pen/jOLwZLo

Et voilà où j'en suis actuellement:
https://codepen.io/BOU59000/pen/PoKjRGr

En faisant mes petites manipulations, je me rends compte qu'il y a des notions que je ne maitrise pas.
J'ai relu ci et là des explications mais pour le moment le déclic ne vient pas

Je ne suis pas certain mais je dois pêcher du côté des flexbox

:
. Qu'est ce qui entre dans le domaine de la flexbox et qu'est ce qui ne rentre pas dedans?
Seuls les éléments estampillés div rentrent dans le champs d'action des flexbox?
. Qu'est ce qui peut faire sortir des éléments du cours des éléments? Seulement la propriété position: attribut sortir du cours (type: absolute)

Merci pour vos réponses qui me permettent de mettre en ordre progressivement tout cela dans mon esprit

**jreaux62** · 28/10/2021, 12h49

Bonjour,

si tu ne veux pas trop te prendre le chou en réinventant la roue, tu peux utiliser Bootstrap 5 (ou autre).

**BOU59000** · 28/10/2021, 16h18

Merci pour ton retour.
Je vais continuer à "intégrer" la partie HTML/ CSS.
Je passerai sur bootstrap par la suite.
J'ai voulu aller trop vite dans mon apprentissage des cours.
Et je sens que j'ai des lacunes dès que je souhaite un travail "plus fin".

Je vais profiter de ce long we pour réécrire complètement tout mon code avec mes "nouvelles connaissances".
J'ai remarqué des doublons dans mon code (à force rectifier/ modifier/ changer...)...
Du coup partir d'une page blanche me permettra d'avoir un code plus sympa tout en m'aidant à assimiler un peu plus

Un très grand merci à tous pour votre aide

Afficher/ Masquer une div

JavaScript

Discussions similaires

Partager

Partager