Boucler sur une déclaration de fonction
Bonjour,
Je cherche à faire un menu d'accueil de site web pour présenter plusieurs galeries photos différentes.
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
| 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:
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:
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:
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 :weird: