Le menu écrit en jquery glisse de gauche à droite et apparaît_jquery

/*C'est le style du bouton de raccourci, utilisant la méthode d'écriture d'attribut CSS3, sans tenir compte de ie8-*/
.quick{
position:relative
left:0; 🎜 >top:0;
largeur:100%;
hauteur:32px
background:-webkit-gradient(linéaire, haut gauche, bas gauche, de(#99f), à(#96f) ) ;
arrière-plan :-webkit-linear-gradient(#99f, #96f);
arrière-plan : -moz-linear-gradient(#99f, #96f) ; dégradé (#99f, #9f) ;
arrière-plan : -o-linear-gradient(#99f, #96f) ;
arrière-plan : linéaire-gradient(#99f, #96f) ; Ce côté est le CSS de la navigation, */
.slideLeftMenu{
display:none
width:272px; ;
min-hauteur : 100 % ;
arrière-plan :#3d3d3d ;
position :absolue
droite :0 ;
z-index : 3 ; 🎜>}
.slideLeftMenu .quick-toolbar,
.slideLeftMenu .list-item{
display:block;
width:100%;
float:left
hauteur : 42px;
line-height:42px;
background:-webkit-gradient(linéaire, en haut à gauche, en bas à gauche, de (#444), à (#222)); dégradé linéaire (#444, #222);
arrière-plan : -moz-linear-gradient(#444, #222) ;
arrière-plan : -ms-linear-gradient(#444, #222); 🎜>arrière-plan : -o-linear-gradient(#444, #222);
background : Linear-gradient(#444, #222);
}
.quick-toolbar .toolbar-title{
float:right;
color:#fff;
margin-right:10px
}
.quick-toolbar .toolbar-icon-delete{
float:left
largeur :18px;
hauteur:18px;
marge:11px 0 0 10px;
arrière-plan:url(images/icons-18-white.png) -73px -1px #212121; border-radius :9px;
}
.menuList .list-item-title{
float:left
font:blod 1.125em Arial, Helvetica, sans-serif
couleur : #fff;
text-indent:0.75em;
text-align:left;
border:solid 0px red
.menuList .list-item-icon{
float:right ;
largeur:18px;
hauteur:18px
marge:11px 10px 0 0; 212121;
border-radius:9px;
}/*La partie CSS du masque, la plupart d'entre elles sont implémentées en utilisant un positionnement absolu, car nous voulons que la navigation s'effectue en douceur depuis le côté droit*/
.masqueur{
affichage : aucun ;
largeur : 100 % ;
hauteur : 100 % ;
position : absolue ; >background ; Utilisez jq pour traiter la partie animation, le code suivant




Copiez le code


Le code est le suivant :


window.QuickPanel = { //Définir la fonction globale
'isOpened': false,
'opened': function(){ //Définir la méthode pour ouvrir le panneau si le calque d'arrière-plan. et le calque du bouton de raccourci sont cliqués lors de l'ouverture, le panneau sera fermé
$masklayer.fadeIn().on("click" ,function(){
window.QuickPanel.closed();
} );
$quickpanel_toolbar.on("click" ,function (){

"right":"-272px"
} ,function(){
$masklayer.fadeOut(); //De cette façon, le masque qui vient de disparaître a des problèmes lorsque je clique trop vite. . .
window.QuickPanel.isOpened = false;
$panel.hide(); //Masquer le menu une fois l'animation terminée, donc il n'y aura pas de barre de défilement
}
} ; 🎜>} ;


Cette partie est la plus importante. J'ai encapsulé une fonction quickpanel, qui a deux méthodes : ouverte et fermée. Il nous sera plus pratique de cliquer et d'appeler d'autres éléments dom. L'implémentation finale est comme indiqué sur l'image

ps : Il y a un problème ici. Une barre de défilement apparaîtra pendant le processus de glissement. C'est en fait très inesthétique. Avez-vous des idées pour le résoudre ? ? J'ai mis la pièce jointe là-bas, veuillez la télécharger, l'exécuter et jeter un œil. S'il y a quelque chose qui ne va pas, veuillez laisser un message ~~ Merci beaucoup.