The menu written in jquery slides from left to right and appears_jquery

Recently, I happened to be researching the production of microsites, and I read a lot of information about WeChat 3 platform development tutorials. There are almost no such introductions, but they are all third-party platforms that provide templates for making microsites. Later, I am very grateful to Liu Feng Blog The last article I wrote to explain the microsite,

“What is a microsite?

Microsites are old wine in new bottles. They have been deified by some marketing people, so much so that many developers I’m asking what a microsite is and how to develop a microsite. A microsite is essentially a mobile website (Web APP) that uses the WeChat browser as the entrance and is compatible with the technologies and technologies used to develop microsites such as Android, iOS, and WP. Developing ordinary websites is based on HTML (HTML5), CSS, Javascript, etc., so developers with experience in ordinary website development are fully capable of developing microsites

PS: What will beginners see in the future. New terms starting with "微", such as: micro mall, micro customer service, micro statistics, it is not difficult to understand if you just remove the word "微" or think of "微" as "based on WeChat",

Most of them involve the writing method of html5, so it is easy to understand. . . There is also a reference to the case in "WeChat Business Bao". I wrote a demo of the navigation in it. It feels very easy to understand. The interface renderings below


because it is used Written by jq, you need to quote the library file. The online cdn address is used here:

Copy the code The code is as follows :

Then write the html navigation structure

Copy the codeThe code is as follows:

QUICK MENU

> ;

Home

> ;

About Us

a>

Products

News

Contact Us

There is nothing technical about this part, it is purely a div structure

Copy code The code is as follows :

*{ margin:0; padding:0;}
body{
font- size:1em;
height:100%;
margin:0;
padding:0;
}

Copy code The code is as follows:

/*This is the style of the shortcut button, using css3 attribute writing method, not considering ie8-*/
.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);
}/*this The side is the css of the navigation, */
.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;
}/*The css part of the mask, most of these are implemented using absolute positioning, because we want the navigation to fly in smoothly from the right side*/
. masklayer{
display:none;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background ; Use jq to process the animation part, the following code

Copy the code

The code is as follows: window.QuickPanel = { //Define global function 'isOpened': false, 'opened': function(){ //Define the method to open the panel. If the background layer and shortcut button layer are clicked while opening, the panel will be closed. $masklayer.fadeIn().on("click" ,function(){

window.QuickPanel.closed();

});
$quickpanel_toolbar.on("click" ,function (){
window.QuickPanel.closed();
});
$panel.css({ //Fly in from the right and use absolute positioning to operate
"width":"272px ",
"top":"-6px",
"right":"-272px"
}).show().animate({"right":"0"},function() {
window.QuickPanel.isOpened = true;
});
},
'closed': function(){ //Define the method to close the panel
$panel.css({" right":"0"}).show().animate({
"right":"-272px"
},function(){
$masklayer.fadeOut(); //This way The mask that has just faded out has problems when I click too fast. . .
window.QuickPanel.isOpened = false;
$panel.hide(); //Hide the menu after the animation is over, so there will be no scroll bar
});
}
} ;


This part is the most important. I encapsulated a quickpanel function, which has two methods: open and closed. It will be more convenient for us to click and call other dom elements. The final implementation is as shown in the picture

ps: There is a problem here. A scroll bar will appear during the sliding process. This is actually very unsightly. Do you have any ideas to solve it? ? I put the attachment over there in the resources. Please download it and run it to have a look. If there is anything wrong, please leave a message~~Thank you very much.