Sujet Précédent Sujet Suivant

Transition pour un sous-menu

barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 17 oct. 2015 à 19:25
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 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

Réponse 1 / 2
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
17 oct. 2015 à 21:38
bonjour

cree une class avec la position ouverte et modifie cette class avec javascript
0
Réponse 2 / 2
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 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

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
comment créer un sous menu
msi79 -
msi79 -

8 réponses
matrice de transition
Ret-ing -
jordane45 -

1 réponse
créer un menu principal
cs_valsta -
valsta -

5 réponses
Menu et sous menu
tennisman59 -
maili20 -

11 réponses
Rejoignez-nous