Transition pour un sous-menu

barale61
Messages postés
1177
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 juin 2022
- 17 oct. 2015 à 19:25
barale61
Messages postés
1177
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 juin 2022
- 18 oct. 2015 à 17:15
Bonjour,

Je souhaite faire une transition sur la hauteur à l'ouverture de mon sous-menu qui s'ouvre en cliquant sur un lien par le biais d'un js. Je ne souhaite pas faire cette transition avec un :hover mais au clic et je ne sais pas comment m'y prendre si vous pouviez me mettre sur la voie.

Voici mon html:

<ul id="nav" class="nav navbar-nav">
    <li><a href="#"><i class="fa-pos fa fa-home"></i>
 Accueil<span id="btn_moins" onclick="sous_menu()"></span><span id="btn_plus" onclick="sous_menu()"></span></a>
                            <ul id="sous_menu">
                               <li><a href="#">Morning star</a></li>
                               <li><a href="#">Vivienne's Omitted Line</a></li>
                               <li><a href="#">Gravitational Pull</a></li>
                           </ul>
                    </li>
                    <li>
 <a href="#qui"><i class="fa-pos fa fa-exclamation-circle"></i> Qui sommes-nous ?</a></li>
                    <li><a href="#contact"><i class="fa-pos fa fa-pencil-square-o"></i>
 Contact</a></li>
                          </ul>


J'imagine quelque chose comme :
#sous_menu {
    display:none;   
}
#nav ul {
	max-height:0em;	
	transition: 1s max-height 0.3s;
}
#nav > li:hover ul {
	max-height: 13em;

mais là, c'est sur li:hover et je souhaite que ça soit au clic.

Je vous remercie de votre aide.

2 réponses

@karamel
Messages postés
1810
Date d'inscription
vendredi 9 mai 2008
Statut
Non membre
Dernière intervention
17 juillet 2022
145
17 oct. 2015 à 21:38
bonjour

cree une class avec la position ouverte et modifie cette class avec javascript
0
barale61
Messages postés
1177
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
10 juin 2022
1
18 oct. 2015 à 17:15
Je fais ça dans mon javascript en ajoutant les 2 dernières lignes pour la transition mais cela ne fonctionne pas:
            /* MENU BURGER PROVISOIRE POUR TEST */
            function sous_menu() {
                var sous_menu = document.getElementById('sous_menu');
                var btn_plus = document.getElementById('btn_plus');
                var btn_moins = document.getElementById('btn_moins');

                if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
                            sous_menu.style.display = 'block';
                            btn_plus.style.display = 'none';             
                            btn_moins.style.display = 'block';
                        }
                else {
                            sous_menu.style.display = 'none';
                            btn_plus.style.display = 'block';
                            btn_moins.style.display = 'none';
                    
                            sous_menu.style.maxHeight = '20em';
                    	    sous_menu.style.transition = '1s';
                        }
                    }
0