Transition css, appartition et disparition de mon menu

**aurelien33** · 15/06/2020, 09h32

Bonjour je souhaite mettre en place un effet d'appartition et disparition de mon menu sur mobile en cliquant sur un bouton . J'ai donc utilsé du javascript avec un toggle sur la classe a chaque fois qu'on clique sur le bouton .
Le probleme est que ma transition ne fonctionne que dans un sens. dans l'autre sens, l'element disparait bien mais sans transition.
Quelqu'un aurait il lasolution svp? merci d'avance
CSS :

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
nav{
        position:absolute;
        top:-100%;
        left:0;
        margin:0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-radius: 0px;
        z-index:3000;
        width:100%;
        height:100vh;
    }
 
    nav.ouvert{
        transition: top .3s ease;
        top:0;
    }

JAVASCRIPT

Code javascript :

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

1
2
3
4
5
6
7
hamburger.addEventListener("click",function(){
                nav.classList.toggle("ouvert");
                hamburger.classList.toggle("open"); 
 
                for (let sousItemMenu of  sousItemMenuAll) {
                    sousItemMenu.classList.remove("ouvert");   
                });

**NoSmoking** · 16/06/2020, 17h37

Bonjour et bienvenue sur DVP.

ma transition ne fonctionne que dans un sens. dans l'autre sens, l'element disparait bien mais sans transition.

La déclaration transition: top .3s ease; devrait être placé dans le bloc de déclarations de nav.

**aurelien33** · 16/06/2020, 18h01

Oui mais byzarrement la transition n'est prise en compte que si je la mets dans nav.ouvert. Si je la mets direct dans nav ça ne fonctionne pas du tout

**NoSmoking** · 16/06/2020, 18h56

Pour aller plus loin il nous faudrait la structure HTML et le CSS des éléments concernés.

**aurelien33** · 16/06/2020, 19h18

Code HTML :

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
        <nav class="invisibles">
            <ul class="items-menu">
                <span class="points">•</span>
                <li>
                    <a href="index.php" class="first-items">Accueil</a>
                </li>
                <li>
                    <span class="first-items">Objets Déco</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
                    <ul class="sous-items-menu">
                        <div class="mobil-ss-menu-retour">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg> Menu principal
                        </div>
                        <li><a href="photophores-lanternes.php">Photophores/Lanternes</a></li>
                        <li><a href="vases-pots.php">Vases/Pots</a></li>
                        <li><a href="statuettes.php">Statuettes</a></li>
                        <li><a href="plaids.php">Plaids</a></li>
                        <li><a href="luminaires.php">Luminaires</a></li>
                        <li><a href="tapis.php">Tapis</a></li>
                    </ul>
                </li>
                <li>
                    <span class="first-items">Déco murale</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
                    <ul class="sous-items-menu">
                       <div class="mobil-ss-menu-retour">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg> Menu principal
                        </div>
                        <li><a href="tableaux.php">Tableaux</a></li>
                        <li><a href="deco-metalliques.php">Déco métalliques</a></li>
                        <li><a href="miroirs.php">Miroirs</a></li>
                        <li><a href="horloges.php">Horloges</a></li>
                        <li><a href="affiches.php">Affiches</a></li>
                    </ul>
                </li>
                <li>
                    <span class="first-items">Vaisselle</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
                    <ul class="sous-items-menu">
                       <div class="mobil-ss-menu-retour">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg> Menu principal
                        </div>
                        <li><a href="assiettes.php">Assiettes</a></li>
                        <li><a href="verres.php">Verres</a></li>
                        <li><a href="bols-tasses-mugs.php">Bols/Tasses/Mugs</a></li>
                        <li><a href="plats.php">Plats</a></li>
                    </ul>
                </li>
                <li>
                    <span class="first-items">Accessoires/Bijoux</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
                    <ul class="sous-items-menu">
                        <div class="mobil-ss-menu-retour">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg> Menu principal
                        </div>
                        <li><a href="bijoux.php">Bijoux</a></li>
                        <li><a href="sacs.php">Sacs</a></li>
                        <li><a href="echarpes.php">Écharpes</a></li>
                        <li><a href="serviettes-de-plage.php">Serviettes de plage</a></li>
                        <li><a href="trousses-pochettes.php">Trousses/Pochettes</a></li>
                    </ul>
                </li>
                <li>
                    <span class="first-items">Pour les enfants</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
                    <ul class="sous-items-menu">
                        <div class="mobil-ss-menu-retour">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg> Menu principal
                        </div>
                        <li><a href="peluches-doudous.php">Peluches/Doudous</a></li>
                        <li><a href="kits-repas-enfants.php">Kits repas</a></li>
                        <li><a href="gourdes-boites-goûter.php">Gourdes/Boîtes à goûter</a></li>
                        <li><a href="deco-chambres.php">Déco chambres</a></li>
                    </ul>
                </li>
                <li>
                    <a id="ancre" href="#nouveautes" class="first-items">Nouveautés</a>
                </li>
                <li>
                    <a href="marques.php" class="first-items">Marques</a>
                </li>
                <li>
                    <a href="contact.php" class="first-items">Contact</a>
                </li>
                <li class="compte-et-panier-menu">
                    <a href="mon-compte.php" class="first-items">Mon compte</a>
                </li>
                <li class="compte-et-panier-menu">
                    <a href="mon-panier.php" class="first-items">Mon panier</a>
                </li>
                <span class="points">•</span>
            </ul>
            <div id="mobil-container-sous-menu">
                <span></span>
            </div>
        </nav>

**NoSmoking** · 18/06/2020, 16h21

La première chose à faire est de rendre ton code HTML conforme, pour cela tu peux t'aider d'un validateur HTML.

Erreur sur tes éléments <div> et <span> :

Error: Element span not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
Error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Pour commencer, il te faut revenir à une structure plus épurée.

Je te propose de repartir de :

Code html :

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
<nav>
  <ul>
    <li><a href="index.php">Accueil</a></li>
    <li>
      <span>Objets Déco</span>
      <ul>
        <li><a href="photophores-lanternes.php">Photophores/Lanternes</a></li>
        <li><a href="vases-pots.php">Vases/Pots</a></li>
        <li><a href="statuettes.php">Statuettes</a></li>
        <li><a href="plaids.php">Plaids</a></li>
        <li><a href="luminaires.php">Luminaires</a></li>
        <li><a href="tapis.php">Tapis</a></li>
      </ul>
    </li>
    <li>
      <span>Déco murale</span>
      <ul>
        <li><a href="tableaux.php">Tableaux</a></li>
        <li><a href="deco-metalliques.php">Déco métalliques</a></li>
        <li><a href="miroirs.php">Miroirs</a></li>
        <li><a href="horloges.php">Horloges</a></li>
        <li><a href="affiches.php">Affiches</a></li>
      </ul>
    </li>
    <li>
      <span>Vaisselle</span>
      <ul>
        <li><a href="assiettes.php">Assiettes</a></li>
        <li><a href="verres.php">Verres</a></li>
        <li><a href="bols-tasses-mugs.php">Bols/Tasses/Mugs</a></li>
        <li><a href="plats.php">Plats</a></li>
      </ul>
    </li>
    <li>
      <span>Accessoires/Bijoux</span>
      <ul>
        <li><a href="bijoux.php">Bijoux</a></li>
        <li><a href="sacs.php">Sacs</a></li>
        <li><a href="echarpes.php">Écharpes</a></li>
        <li><a href="serviettes-de-plage.php">Serviettes de plage</a></li>
        <li><a href="trousses-pochettes.php">Trousses/Pochettes</a></li>
      </ul>
    </li>
    <li>
      <span>Pour les enfants</span>
      <ul>
        <li><a href="peluches-doudous.php">Peluches/Doudous</a></li>
        <li><a href="kits-repas-enfants.php">Kits repas</a></li>
        <li><a href="gourdes-boites-goûter.php">Gourdes/Boîtes à goûter</a></li>
        <li><a href="deco-chambres.php">Déco chambres</a></li>
      </ul>
    </li>
    <li><a href="#nouveautes">Nouveautés</a></li>
    <li><a href="marques.php">Marques</a></li>
    <li><a href="contact.php">Contact</a></li>
    <li><a href="mon-compte.php">Mon compte</a></li>
    <li><a href="mon-panier.php">Mon panier</a></li>
  </ul>
</nav>

Il nous manquerait peut-être le CSS pour essayer de cerner au mieux ton rendu.

Transition css, appartition et disparition de mon menu

CSS

Vue hybride

Discussions similaires

Partager

Partager