Recently, just in the study of the production of micro-site, access to a large number of information is about the micro-letter 3 Platform development tutorials, almost no such introduction, but are Third-party platform to provide templates to make micro-station, and then thank Liu Feng Blog last wrote the micro-site FAQ,
"What is a micro-site?"
Micro-site is a new bottle of wine, by some marketing people to deified, so many developers are asking what is a micro-site, how to develop micro-sites. Micro-site is essentially a micro-mail browser for the portal of the Mobile Web site (web APP), can be compatible with Android, IOS, WP and other operating systems. Development of micro-web sites used in the same technology as the development of ordinary websites, are based on HTML (HTML5), CSS, JavaScript, etc., so have a common web site development experience developers, fully capable of developing micro-sites.
PS: Beginners later see what the "micro" of the beginning of the term, such as: micro-mall, micro-customer service, micro-statistics, directly to the "micro" word removed or "micro" as a "micro-letter" is not difficult to understand. ”，
Most of them involve the writing of HTML5, so that's a good understanding ... There is a reference to the "micro-letter business Treasure" in the case, inside the navigation itself wrote under the demo, feeling is still very well understood, the following interface effect diagram
Because it is written with JQ, you need to refer to the library file, which uses the online CDN address:
Copy Code code as follows:
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script>
Then write HTML navigation structure
Copy Code code as follows:
<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>
This part is not technical, pure is div structure
Copy Code code as follows:
<span style= "White-space:pre" > </span>*{margin:0;
body{
Font-size:1em;
height:100%;
margin:0;
padding:0;
}
Copy Code code as follows:
/* This is the style of the shortcut button, using the CSS3 property, not considered 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 is the navigation of CSS, * *
<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;
The CSS part of the}/* mask, most of which are implemented using absolute positioning, because we want the navigation to fly smoothly from the right.
. masklayer{
Display:none;
width:100%;
height:100%;
Position:absolute;
left:0;
top:0;
Background: #000;
opacity:0.6;
Z-index:2;
}
The CSS are all written, it is finished half, the rest is to use JQ processing animation parts, the following code
Copy Code code as follows:
Window. Quickpanel = {//define global function
' isopened ': false,
' Opened ': function () {//Define Panel open method, open while clicking the background layer and shortcut button layer, perform closing panel
$masklayer. FadeIn (). On ("click", Function () {
Window. Quickpanel.closed ();
});
$quickpanel _toolbar.on ("click", Function () {
Window. Quickpanel.closed ();
});
$panel. CSS ({//fly in from the right, use absolute positioning to manipulate
"width": "272px",
"Top": " -6px",
"Right": " -272px"
). Show (). Animate ({"Right": "0"},function () {
Window. Quickpanel.isopened = true;
});
},
' Closed ': function () {//Define closing panel method
$panel. css ({' Right ': ' 0} '). Show (). Animate ({
"Right": " -272px"
},function () {
$masklayer. fadeout (); This side just fade out of the mask, I click Fast when there will be problems ...
Window. quickpanel.isopened = false;
$panel. Hide (); When the animation is over, the menu is hidden, not the scroll bar.
});
}
};
This is the most important part, I encapsulate a quickpanel function, which has the open and closed methods, for our other DOM elements click on the call will be more convenient, the final implementation is the image of the next effect,
PS: Here is a problem, in the sliding process will appear scroll bar, so in fact, is very beautiful, I would like to ask Daniel have the solution?? I put the attachment to the resources over there, trouble downloading run to see if there is something wrong please leave a message Oh ~ ~ Thank you very much
