Das in jquery geschriebene Menü gleitet von links nach rechts und erscheint

Kürzlich habe ich die Produktion von Microsites recherchiert und viele Informationen über Tutorials zur Entwicklung der WeChat 3-Plattform gelesen. Ich bin Liu Feng Blog sehr dankbar. Der letzte Artikel, den ich geschrieben habe, um die Microsite zu erklären,

"Was ist eine Microsite?

Microsites sind alter Wein in neuen Schläuchen. Sie wurden von einigen vergöttert Marketing-Leute, so sehr, dass viele Entwickler fragen, was eine Microsite ist und wie man eine Microsite entwickelt. Eine Microsite ist im Wesentlichen eine mobile Website (Web-APP), die den WeChat-Browser als Eingang verwendet und mit den Technologien und kompatibel ist Zur Entwicklung von Microsites verwendete Technologien wie Android, iOS und WP basieren auf HTML (HTML5), CSS, Javascript usw., sodass Entwickler mit Erfahrung in der Entwicklung normaler Websites uneingeschränkt in der Lage sind, Microsites zu entwickeln

PS: Was Einsteiger in Zukunft sehen werden, neue Begriffe, die mit „微“ beginnen, wie zum Beispiel: Micro Mall, Micro Customer Service, Micro Statistics, ist nicht schwer zu verstehen, wenn man einfach das Wort „微“ entfernt oder nachdenkt von „微“ als „basierend auf WeChat“,

Die meisten davon verwenden die Schreibmethode von HTML5, sodass sie leichter zu verstehen sind. . . Außerdem habe ich auf den Fall in „WeChat Business Bao“ verwiesen. Es fühlt sich sehr einfach an, die Darstellungen der Benutzeroberfläche zu verstehen Da es von jq geschrieben wird, müssen Sie hier die Online-CDN-Adresse angeben:

Das in jquery geschriebene Menü gleitet von links nach rechts und erscheint_jquery

Kopieren Sie den Code

Der Code lautet wie folgt:

Dann schreiben Sie die HTML-Navigationsstruktur

Kopieren Sie den Code

Der Code lautet wie folgt:

🎜>

>
="list-item-title">Home >

Über uns

News

< a class="list-item">

🎜>

< /div>

An diesem Teil ist nichts Technisches, es handelt sich lediglich um eine div-Struktur

Code kopieren

Der Code lautet wie folgt:

*{ margin:0; padding:0;}
font- size:1em;
marge:0;
}

Code kopieren

Der Code lautet wie folgt:

 
/*Dies ist der Stil der Verknüpfungsschaltfläche unter Verwendung der CSS3-Attributschreibmethode, ohne Berücksichtigung von ie8-*/ 
.quick{ 
position:relative; 
left:0; 🎜 >top:0; 
width:100%; 
height:32px; 
background:-webkit-gradient(linear, left top, left down, from(#99f), to(#96f) ) ; 
background:-webkit-linear-gradient(#99f, #96f); 
background: -moz-linear-gradient(#99f, #96f); Farbverlauf (#99f, #9f); 
Hintergrund: -o-linear-gradient(#99f, #96f); 
Hintergrund: linear-gradient(#99f, #96f); Diese Seite ist das CSS der Navigation, */ 
 .slideLeftMenu{ 
display:none 
width:272px; ; 
min-height:100%; 
position:absolute; 
z-index:3; 🎜>} 
.slideLeftMenu .quick-toolbar, 
.slideLeftMenu .list-item{ 
display:block; 
width:100%; 
height: 42px; 
line-height:42px; 
background:-webkit-gradient(linear, left top, left down, from(#444), to(#222)); linearer-gradient (#444, #222); 
Hintergrund: -moz-linear-gradient(#444, #222); 
Hintergrund: -ms-linear-gradient(#444, #222); 🎜>Hintergrund: -o-linear-gradient(#444, #222); 
Hintergrund: linear-gradient(#444, #222); 
.quick-toolbar .toolbar-title{ 
 float:right; 
margin-right:10px 
.quick-toolbar .toolbar-delete{ 
float:left; 🎜>width:18px; 
margin:11px 0 0 10px;background:url(images/icons-18-white.png) -73px -1px 
 border-radius :9px;} 
.menuList .list-item-title{ 
float:left; #fff; 
text-indent:0.75em; 
border:solid 0px red; float:right ; 
width:18px; 
margin:11px 10px 0 0; 212121; 
border-radius:9px 
}/*Der CSS-Teil der Maske, die meisten davon werden mit absoluter Positionierung implementiert, da wir möchten, dass die Navigation reibungslos von der rechten Seite einfliegt*/ 
. masklayer{ 
display:none; 
height:100%; 
top:0; >background ; Verwenden Sie jq, um den Animationsteil zu verarbeiten, den folgenden Code 




Kopieren Sie den Code 


 Der Code lautet wie folgt: 
 
 
window.QuickPanel = { //Definieren Sie die globale Funktion 
'isOpened': false, 
'opened': function(){ //Definieren Sie die Methode zum Öffnen des Panels als Hintergrundebene und die Verknüpfungsschaltflächenebene beim Öffnen angeklickt wird, wird das Panel geschlossen. ); 
$quickpanel_toolbar.on("click" ,function (){ 
window.QuickPanel.closed(); 
}); 
$panel.css({ //Einfliegen vom rechts und verwenden Sie die absolute Positionierung, um 
"width": "272px", 
"top": "-6px", 
"right": "-272px" 
}).show() zu bedienen. .animate({"right":0"},function() { 
window.QuickPanel.isOpened = true; 
}, 
'closed': function(){ //Definieren Sie die Methode zum Schließen des Panels 
$panel.css({" right":"0"}).show().animate({ 
"right":"-272px" 
} ,function(){ 
$masklayer.fadeOut(); //So hat die gerade ausgeblendete Maske Probleme, wenn ich zu schnell klicke. . . 
window.QuickPanel.isOpened = false; 
$panel.hide(); //Das Menü ausblenden, nachdem die Animation beendet ist, sodass keine Bildlaufleiste vorhanden ist
} 
} ; 

Dieser Teil ist der wichtigste. Ich habe eine Quickpanel-Funktion gekapselt, die zwei Methoden hat: Öffnen und Schließen. Es ist für uns bequemer, andere Dom-Elemente anzuklicken. Die endgültige Implementierung ist wie im Bild gezeigt

ps: Während des Schiebevorgangs wird ein Problem angezeigt. Das ist tatsächlich sehr unansehnlich. ? Ich habe den Anhang dort abgelegt. Bitte laden Sie ihn herunter, führen Sie ihn aus und schauen Sie nach. Wenn etwas nicht stimmt, hinterlassen Sie bitte eine Nachricht. Vielen Dank

Verwandte Etiketten：

滑动菜单

Quelle：php.cn

Vorheriger Artikel：Eine sehr umfassende Javascript-URL-Parsing-Funktion und segmentierte URL-Parsing-Methode_Javascript-Fähigkeiten Nächster Artikel：jQuery erkennt den Effekt einer großen Bildvorschau, wenn die Maus über picture_jquery fährt

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors