Menus written in jquery slide from left to right to appear

  • 2020-03-30 02:35:33
  • OfStack

Recently, I happened to be studying the production of micro-website, and consulted a lot of materials about the WeChat 3 platform development tutorial, there is almost no such introduction, but it is a third-party platform to provide templates for the production of micro-site, and I was very grateful for the explanation of the micro-website written by liufeng blog at last.

"What is a microsite?

Micro website is a new bottle of old wine, by some marketing people to be deified, so that many developers are asking what is micro site, how to develop micro site. Micro website is essentially a mobile website (Web APP) with WeChat browser as the entry point, which can be compatible with Android, iOS, WP and other operating systems. The development of micro website used technology and the development of ordinary website, are based on HTML (HTML5), CSS, Javascript, etc., so there is a common website development experience of developers, fully capable of developing micro website.

PS: after beginners see what with "micro" beginning of the new noun, such as: micro mall, micro customer service, micro statistics, directly put the "micro" word out or "micro" as "WeChat-based" is not difficult to understand. ,  

Most of them are written in html5, so it's easy to understand... There is a reference to the "WeChat business treasure" in the case, the navigation itself wrote a demo, feel or very easy to understand, the following interface renderings

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404111504372.gif? 201431115449 ">
Since it is written in jq, the library file needs to be referenced. The online CDN address is used here:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 


Then write the HTML navigation structure
 
<div class="quick"></div> 

<div class="slideLeftMenu"> 
<div class="quick-toolbar"> 
<p class="toolbar-title">QUICK MENU</p> 
<span class="toolbar-icon-delete"></span> 
</div> 
<div class="menuList"> 
<a class="list-item"> 
<p class="list-item-title">Home</p> 
<span class="list-item-icon"></span> 
</a> 

<a class="list-item"> 
<p class="list-item-title">About Us</p> 
<span class="list-item-icon"></span> 
</a> 

<a class="list-item"> 
<p class="list-item-title">Products</p> 
<span class="list-item-icon"></span> 
</a> 

<a class="list-item"> 
<p class="list-item-title">News</p> 
<span class="list-item-icon"></span> 
</a> 

<a class="list-item"> 
<p class="list-item-title">Contact Us</p> 
<span class="list-item-icon"></span> 
</a> 
</div> 

</div> 

<div class="masklayer"></div> 

There's nothing technical about this part, just div structure, right
 
<span style="white-space:pre"> </span>*{ margin:0; padding:0;} 
body{ 
font-size:1em; 
height:100%; 
margin:0; 
padding:0; 
} 

 
 
.quick{ 
position:relative; 
left:0; 
top:0; 
width:100%; 
height:32px; 
background:-webkit-gradient(linear, left top, left bottom, from(#99f), to(#96f)); 
background:-webkit-linear-gradient(#99f, #96f); 
background: -moz-linear-gradient(#99f, #96f); 
background: -ms-linear-gradient(#99f, #9f); 
background: -o-linear-gradient(#99f, #96f); 
background: linear-gradient(#99f, #96f); 
} 
<span style="white-space:pre"> </span>.slideLeftMenu{ 
display:none; 
width:272px; 
min-height:100%; 
background:#3d3d3d; 
position:absolute; 
right:0; 
top:0; 
z-index:3; 
} 
.slideLeftMenu .quick-toolbar, 
.slideLeftMenu .list-item{ 
display:block; 
width:100%; 
float:left; 
height:42px; 
line-height:42px; 
background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
background:-webkit-linear-gradient(#444, #222); 
background: -moz-linear-gradient(#444, #222); 
background: -ms-linear-gradient(#444, #222); 
background: -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; 
width:18px; 
height:18px; 
margin:11px 0 0 10px; 
background: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; 
color:#fff; 
text-indent:0.75em; 
text-align:left; 
border:solid 0px red; 
} 
.menuList .list-item-icon{ 
float:right; 
width:18px; 
height:18px; 
margin:11px 10px 0 0; 
background:url(images/icons-18-white.png) -108px -1px #212121; 
border-radius:9px; 
} 
.masklayer{ 
display:none; 
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
background:#000; 
opacity:0.6; 
z-index:2; 
} 

With all the CSS written, you're more than half done, and the rest is to use jq for the animation, as shown in the following code
 
window.QuickPanel = { //Define global functions
'isOpened': false, 
'opened': function(){ //Define the method to open the panel. If you click on the background layer and shortcut button layer while opening, close the panel
$masklayer.fadeIn().on("click" ,function(){ 
window.QuickPanel.closed(); 
}); 
$quickpanel_toolbar.on("click" ,function(){ 
window.QuickPanel.closed(); 
}); 
$panel.css({ //Fly in from the right, using absolute positioning
"width":"272px", 
"top":"-6px", 
"right":"-272px" 
}).show().animate({"right":"0"},function(){ 
window.QuickPanel.isOpened = true; 
}); 
}, 
'closed': function(){ //Define the close panel method
$panel.css({"right":"0"}).show().animate({ 
"right":"-272px" 
},function(){ 
$masklayer.fadeOut(); //The mask here just fades out, and when I click fast, I have a problem...
window.QuickPanel.isOpened = false; 
$panel.hide(); //When the animation is over, hide the menu so that there is no scrollbar
}); 
} 
}; 

This part is the most important. I have encapsulated a function of quickpanel, which has two methods, open and closed. It is more convenient for us to click and call other dom elements.

Ps: there is a problem here, in the process of sliding will appear scroll bar, so it is actually very ugly, please ask Daniel have a way to solve it?? I put the attachment on the resource side, please download and run it. If there is anything wrong, please leave a message and put it forward. Thank you very much

Related articles: