Discussion :

[Winitom]

Bonjour,

Je cherche à faire un menu d'accueil de site web pour présenter plusieurs galeries photos différentes.

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function FonctionNord() {
    document.getElementById("MenuNord").classList.toggle("show");
}
 
function FonctionNordEst() {
    document.getElementById("MenuNordEst").classList.toggle("show");
}
 
function FonctionEst() {
    document.getElementById("MenuEst").classList.toggle("show");
}
 
function FonctionSudEst() {
    document.getElementById("MenuSudEst").classList.toggle("show");
}
 
function FonctionSud() {
    document.getElementById("MenuSud").classList.toggle("show");
}
 
function FonctionSudOuest() {
    document.getElementById("MenuSudOuest").classList.toggle("show");
}
 
function FonctionOuest() {
    document.getElementById("MenuOuest").classList.toggle("show");
}
 
function FonctionNordOuest() {
    document.getElementById("MenuNordOuest").classList.toggle("show");
}

J'aimerais boucler cette affaire,
J'ai essayer d'assigner les variables dans des tableaux mais rien de fonctionnel n'en est sortie.


J'imagine que je pourrai boucler la partie de code ci-dessous de la même façon :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
window.onclick = function(event) {
  if (!event.target.matches('.Nord')) {
 
    var dropdowns = document.getElementsByClassName("ContenuMenuNord");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

Le résultat donne une rose-des-vents, le code HTML en question :

Code html :

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

1
2
3
4
5
6
7
8
9
10
	<div id="Ouest_noir"> </div>
	<div id="Ouest_blancG"> </div>
	<div id="Ouest_blancD"> </div>
	<a onclick="FonctionOuest()" id="Ouest_gris" class="Ouest"> <bulleO> Journaux </bulleO> </a>
		<div id="MenuOuest" class="ContenuMenuOuest">
			<a href="#">Lien 1</a>
			<a href="#">Lien 2</a>
			<a href="#">Lien 3</a>
		</div>
	<div id="CercleOuest"> </div>

Le 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
#OuestOS_noir
{
position: absolute;
top: 50%;
margin-top: -6.1vh;	
left: 50%;
margin-left: -13.2vh;
border-style: solid;
border-width:  0 4.125vh 19.5vh 4.125vh;
border-color: transparent transparent #000000 transparent;
z-index: 0;
transform: rotate(-112.5deg);
}
 
#OuestOS_blancG
{
position: absolute;
top: 50%;
margin-top: -3.8vh;
left: 50%;
margin-left: -10.2vh;
border-style: solid;
border-width:  0 0 18.5vh 3.875vh;
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-112.5deg);
}
 
#OuestOS_blancD
{
position: absolute;
top: 50%;
margin-top: -7.4vh;
left: 50%;
margin-left: -11.7vh;
border-style: solid;
border-width:  0 3.875vh 18.5vh 0;
border-color: transparent transparent #ffffff transparent;
z-index: 1;
transform: rotate(-112.5deg);
}
 
 
 
 
 
 
 
#Ouest_noir
{
position: absolute;
top: 50%;
margin-top: -4.125vh;
left: 50%;
margin-left: -37.925vh;
width: 0;
height: 0;
border-style: solid;
border-width:  4.125vh 37.925vh 4.125vh 0;
border-color: transparent #000000 transparent transparent;
z-index: 2;
}
 
#Ouest_blancG
{
position: absolute;
top: 50%; 
left: 50%;
margin-left: -36.546vh;
width: 0;
height: 0;
border-style: solid;
border-width:  0px 36.546vh 3.975vh 0;
border-color:  transparent #ffffff transparent transparent;
z-index: 3;
}
 
#Ouest_blancD
{
position: absolute;
top: 50%;
margin-top: -4.025vh;
left: 50%;
margin-left: -36.546vh;
width: 0;
height: 0;
border-style: solid;
border-width:  3.975vh 36.546vh 0 0px;
border-color:  transparent #ffffff transparent transparent;
z-index: 3;
}
 
#Ouest_gris
{
position: absolute;
top: 50%;
margin-top: -4.125vh;
left: 50%;
margin-left: -37.925vh;
width: 0;
height: 0;
border-style: solid;
border-width:  4.125vh 37.925vh 4.125vh 0;
border-color: transparent #ff5353 transparent transparent;
z-index: 4;
opacity: 0;
}
 
#Ouest_gris:hover
{
opacity: 0.6;
}
 
a bulleO
{
position: relative;
display: block;
text-align: center;
font-size: 3.3vh;
width: 20vh;
top: -3vh;
left: -17vh;
transform:scale(0) rotate(-88deg);
transition:all .25s;
}
 
a:hover bulleO, a:focus bulleO
{
transform:scale(1) rotate(-90deg);
}
 
#CercleOuest
{
position: absolute;
left: 50%;
margin-left: -39.575vh;
top: 50%;
margin-top: -1.9vh;
border-style: solid;
border-color: #000000;
border-width: 1px;
border-radius: 50%;
	width: 3.3vh;
	height: 3.3vh;
background: #ffffff;
z-index: 5; 
}

Merci pour votre attention

[gabi7756]

Bonjour,
Un truc comme ca ?

Code JS :

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

1
2
3
4
5
6
7
8
 
function toggle(id,classname){
    document.getElementById(id).classList.toggle(classname);
}
var toggleTab= ["MenuNord","MenuNordEst","MenuEst","MenuSudEst","MenuSud","MenuSudOuest","MenuOuest","MenuNordOuest"]
toggleTab.forEach(element => {
    toggle(element,"show")
});

Je reste scéptique par rapport à ta question,
https://developer.mozilla.org/en-US/...ment/classList permet de supprimer ou ajouter une class css à l'élément,cependant il n'existe pas de "show" dans ton css a moins que je me trompe.
De plus pourquoi veux tu faire ceci en js ?

Cdt,

[Winitom]

Merci pour cette solution @gabi7756,

J'ai réussi à prendre du recul sur ce code du coup : Les différences entre <id> (singulier) et <class> (pluriel) ; et la solution avec getElementsByClassName(), car par principe getElementById() est fait pour d'autre cas de figure.

------------------------------------------------------------------------------

[...] cependant il n'existe pas de "show" dans ton css a moins que je me trompe.

Pardon c'est la dernière ligne du fichier :

Code css :

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

1
2
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

------------------------------------------------------------------------------

De plus pourquoi veux tu faire ceci en js ?

Ce code date de 2016, c'était "une commande". Je crois me souvenir que la commande "display" en CSS ne permettait pas de faire les menus dropdown aussi facilement. (https://www.w3.org/standards/history/css-display-3/)

Du coup, merci encore pour ta remarque, autant maintenir le code qu'avec du CSS .

[gabi7756]

getElementsByClassName(), car par principe getElementById() ...

Moi par principe j'utilise jamais getElementById() mais querySelector puisque tu peux faire par sélection par class , id ... type de balise etc... Beaucoup plus malléable et puis ca sert franchement pas à grand chose de changer à chaque fois.
Après chacun son avis

Code js :

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

1
2
3
4
5
 
document.querySelector('.class')
document.querySelector('#id')
document.querySelector('img') // Balise img
// Bref je vais pas tous les faire

Je ne vois pas de question dans ta précédente réponse donc si tu juges que tu as trouvé une solution tu peux mettre en résolu

Cdt,