Afficher/ Masquer une div
Bonjour à toutes et à tous,
Tout d'abord, j'espère avoir poster au bon endroit... J'avoue avoir été un peu perdu :oops:
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! :aie:
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 8O
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:
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:
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:
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:
1
2
3
4
5
| /* NAVIGATION_MOBILE */
#Nav_Mobile
{
display: none;
} |
Je suis certain que j'ai laissé trainer une erreur (de débutant :oops:) quelque part... sauf que je ne la trouve pas.
Pourriez-vous m'aider?
D'avance merci :D
