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