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

Récemment, j'ai fait des recherches sur la production de microsites et j'ai lu beaucoup d'informations sur les didacticiels de développement de la plate-forme WeChat 3. Il n'existe presque pas de telles introductions, mais ce sont toutes des plates-formes tierces qui fournissent des modèles pour créer des microsites. Je suis très reconnaissant au blog Liu Feng. Le dernier article que j'ai écrit pour expliquer le microsite,

"Qu'est-ce qu'un microsite ?

Les microsites sont du vieux vin dans des bouteilles neuves. Ils ont été déifiés par certains les gens du marketing, à tel point que de nombreux développeurs demandent ce qu'est un microsite et comment développer un microsite. Un microsite est essentiellement un site Web mobile (Web APP) qui utilise le navigateur WeChat comme entrée et est compatible avec les technologies et. technologies utilisées pour développer des microsites telles qu'Android, iOS et WP. Le développement de sites Web ordinaires est basé sur HTML (HTML5), CSS, Javascript, etc., de sorte que les développeurs ayant une expérience dans le développement de sites Web ordinaires sont pleinement capables de développer des microsites

PS : Que verront les débutants à l'avenir. De nouveaux termes commençant par « 微 », tels que : micro centre commercial, micro service client, micro statistiques, ce n'est pas difficile à comprendre si vous supprimez simplement le mot « 微 » ou réfléchissez. de "微" comme "basé sur WeChat",

La plupart d'entre eux impliquent la méthode d'écriture html5, donc c'est plus facile à comprendre. . . De plus, j'ai fait référence au cas dans "WeChat Business Bao". J'y ai écrit une démo de la navigation. Cela semble très facile à comprendre. Les rendus de l'interface sont présentés ci-dessous

Le menu écrit en jquery glisse de gauche à droite et apparaît_jquery
. car il est utilisé Écrit par jq, vous devez citer le fichier de la bibliothèque. L'adresse cdn en ligne est utilisée ici :

Copiez le code Le code est le suivant :

Ensuite, écrivez la structure de navigation HTML

Copiez le code Le code est le suivant :

🎜>

="list-item-title">Accueil >

À propos de nous

Actualités

Contactez-nous

🎜>

< /div>

Il n'y a rien de technique dans cette partie, c'est purement une structure div

Copier le code

Le code est le suivant :

*{ margin:0; padding:0;}

body{
font-size:1em
hauteur:100%; }

Copier le code

Le code est le suivant :

 
/*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 (){ 

window.QuickPanel.closed();
}); à droite et utilisez le positionnement absolu pour opérer
"width":"272px ",

"top":"-6px", "right":"-272px" }).show() .animate({"right":"0"},function() { window.QuickPanel.isOpened = true; }); }, 'closed': function(){ //Définissez la méthode pour fermer le panneau

$panel.css({" right":"0"}).show().animate({

"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.

Étiquettes associées：

滑动菜单

source：php.cn

Article précédent：Une fonction d'analyse d'URL javascript très complète et des compétences en méthode d'analyse d'URL segmentées_javascript Article suivant：jQuery réalise l'effet d'un aperçu d'une grande image lorsque la souris passe sur Picture_jquery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur