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,