Comment faire apparaitre un menu quand je clique sur un carré?

Fermé

JLesage - 10 janv. 2021 à 11:43
jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 - 10 janv. 2021 à 12:23

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é?
Apparaitre hors ligne instagram - Guide
Menu déroulant excel - Guide
Comment faire apparaître la tabulation sur word - Guide
Comment ne pas apparaître en ligne sur whatsapp - Guide
Windows 11 menu démarrer classique - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704
10 janv. 2021 à 11:51

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

Réponse 2 / 2

JLesage Messages postés 33 Date d'inscription mercredi 14 novembre 2012 Statut Membre Dernière intervention 23 février 2024 5
Modifié le 10 janv. 2021 à 12:15

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>

JLesage Messages postés 33 Date d'inscription mercredi 14 novembre 2012 Statut Membre Dernière intervention 23 février 2024 5
10 janv. 2021 à 12:16

Pouvez-vous répondre avec un exemple, s'il vous plait?

jordane45 Messages postés 38300 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 novembre 2024 4 704 > JLesage Messages postés 33 Date d'inscription mercredi 14 novembre 2012 Statut Membre Dernière intervention 23 février 2024
10 janv. 2021 à 12:23

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...

Discussions similaires

Lien phishing android

Quel est l'émoji du point d'interrogation dans un carré ?

Bibliothèque

Écrire le signe racine carrée sur le clavier d’un iPhone 5

Signe au carré