Comment faire apparaitre un menu quand je clique sur un carré?
JLesage
-
jordane45 Messages postés 40050 Statut Modérateur -
jordane45 Messages postés 40050 Statut Modérateur -
Salut à tous. J'ai deux div: le premier contient 3 carrés and la deuxième une liste. À coté de chaque carré, il y a un menu (Home, about, contact). Je veux faire apparaitre un menu quand je clique sur le carré qui lui correspond, comment faire ça dans javascript?
<div class="ss">
<div class="s">
</div>
<div class="s">
</div>
<div class="s">
</div>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
A voir également:
- Comment faire apparaitre un menu quand je clique sur un carré?
- Comment faire apparaître la tabulation sur word - Guide
- Apparaitre hors ligne instagram - Guide
- Menu déroulant excel - Guide
- Comment faire apparaître le clavier sur une tablette - Guide
- Comment faire apparaître le curseur sans souris - Guide
2 réponses
Bonjour
Il faut jouer avec le style display pour afficher ou masquer des éléments en javascript.
https://www.w3schools.com/jsref/prop_style_display.asp
Et pour détecter le clic, il faut attacher l'événement cliquer sur tes carrés.
https://www.w3schools.com/jsref/event_onclick.asp
Il faut jouer avec le style display pour afficher ou masquer des éléments en javascript.
https://www.w3schools.com/jsref/prop_style_display.asp
Et pour détecter le clic, il faut attacher l'événement cliquer sur tes carrés.
https://www.w3schools.com/jsref/event_onclick.asp
Merci Jordan. J'ai fait cela, mais je ne sais pas comment aller chercher les éléments à l'intérieur de chaque div. Je vous montre ce que j'ai fait, je ne sais pas si c'est correct:
<script>
var mesDiv = document.getElementsByClassName("ss").getElementsByClassName("s");
mesDiv.addEventListener("click", montrer);
var maListe = document.getElementsByClassName("nav").getElementsByTagName("LI");
var liste = "";
for(var i=0; i<maListe.length; i++){
liste+=maListe[i];
}
function montrer(){
liste.style.display = "block";
}
</script>
Déjà... tu ne peux pas enchainer les instructions comme tu le fais en "pure" javascript...
Ensuite, document.getElementsByClassName retourne un array.... sur lequel il faut boucler..
Ensuite, je ne comprends pas ce que tu essaies de faire...
tu as plusieurs <div class="ss"> sur ta page ?
Le click sur une <div class="s"> doit déclencher la fonction montrer ... et donc ... afficher tous les li de ta page ? (n'importe lesquels ?? )
Il serait bien de nous montrer le code complet de ta page html et nous expliquer en détail ce qui doit être affiché en cliquant sur quel élément précisément...
Ensuite, document.getElementsByClassName retourne un array.... sur lequel il faut boucler..
Ensuite, je ne comprends pas ce que tu essaies de faire...
tu as plusieurs <div class="ss"> sur ta page ?
Le click sur une <div class="s"> doit déclencher la fonction montrer ... et donc ... afficher tous les li de ta page ? (n'importe lesquels ?? )
Il serait bien de nous montrer le code complet de ta page html et nous expliquer en détail ce qui doit être affiché en cliquant sur quel élément précisément...