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 et show-menu?
  • Voulez-vous montrer une démo s'il vous plaît?
InformationsquelleAutor DMande | 2015-04-30