Masquer le menu de la barre latérale lorsque vous cliquez en dehors de la barre ou sur le bouton
Je suis en train de faire un menu comme celui de la sémantique de l'INTERFACE utilisateur, mais je n'ai obtenu de cliquer sur le bouton de menu et ouvrir le menu et vice versa. J'utilise de la bascule de la classe pour afficher la barre latérale, mais je ne sais pas si cette façon est complètement à droite:
<div class="menu-button" id="menu-button"></div>
$('#menu-button').click(function(event) {
$('#hide-menu').toggleClass('show-menu');
});
.hide-menu {
background-color:#336ca6;
position: absolute;
top:0;
right:0;
z-index: 1;
width: 300px;
height: 100%;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.show-menu {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
J'ai essayé de la propagation de l'évènement mais je n'arrive pas à faire jouer.
- Montrer le code entier ou un JSfiddle
- Où est
hide-menu
etshow-menu
? - Voulez-vous montrer une démo s'il vous plaît?
Vous devez vous connecter pour publier un commentaire.
Modifier votre code js à la suite
Espère que cela va fonctionner.
Ici est le violon.
http://jsfiddle.net/ex8ddv5q/1/
Pour une autre de prendre sur elle de vérifier cette Violon
Dans le cas où quelqu'un vient ici et est à l'aide Angulaire au lieu de JQuery, nous avons ce de travailler avec quelque chose de similaire à ci-dessus comme ceci:
Et cela dans le modèle:
Suppose que si votre barre latérale largeur est 270px,vérifiez la souris cliquez sur la coordination.Si c'est plus de donner son style gauche attribut -270px;
Voici mon exemple:https://codepen.io/johncy/pen/oMyzZr