A menu written in jquery slides from left to right.

Recently, I have been studying the production of micro-websites. I have consulted a lot of materials about the 3 platform development tutorials, And I have hardly heard of such introductions. However, they are all templates provided by third-party platforms to create micro-sites, later, I would like to express my gratitude to Liu Feng For The Last micro-website he wrote,

"What is a micro-website?

Micro-websites are new bottles of old wine, and are turned to God by some marketing people, so many developers are asking what is micro-websites and how to develop micro-websites. In essence, a micro-website is a mobile phone website (Web APP) with a browser portal. It is compatible with Android, iOS, WP, and other operating systems. The technologies used to develop micro-websites are the same as those used to develop normal websites. They are based on HTML (HTML5), CSS, and Javascript. Therefore, developers with experience in general website development are fully capable of developing micro-websites.

PS: new terms starting with "micro" will be seen after beginners, such as micro-mall, micro-customer service, and micro-statistics, simply remove the word "micro" or regard "micro" as "based" is not hard to understand. ",

Most of them involve html5 writing, so you can understand it... I also referred to the case in "Business Bao". I wrote a demo for the navigation in it, and I still feel very understandable. The following interface is displayed.


Because it is written in jq, You need to reference the library file. Here the online cdn address is used:

Copy codeThe Code is as follows:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>


Then write the html navigation structure
Copy codeThe Code is 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 has no technical knowledge. It is purely a div structure.
Copy codeThe Code is as follows:
<Span style = "white-space: pre"> </span> * {margin: 0; padding: 0 ;}
Body {
Font-size: 1em;
Height: 100%;
Margin: 0;
Padding: 0;
}

Copy codeThe Code is as follows:
/* This is the style of the shortcut button. CSS 3 attribute is used for writing. ie8-*/is not considered -*/
. 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 );
}/* Here is the css for navigation ,*/
<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)-pixel PX-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 smoothly fly from the right */
. Masklayer {
Display: none;
Width: 100%;
Height: 100%;
Position: absolute;
Left: 0;
Top: 0;
Background: #000;
Opacity: 0.6;
Z-index: 2;
}

After all css is written, more than half is finished. The rest is to use jq to process the animation, as shown in the following code:
Copy codeThe Code is as follows:
Window. QuickPanel = {// defines the global function
'Isopened': false,
'Opened': function () {// defines how to open the panel. If you click the background layer and shortcut button layer while opening the panel, 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 side and use absolute positioning for operations
"Width": "272px ",
"Top": "-6px ",
"Right": "-272px"
}). Show (). animate ({"right": "0"}, function (){
Window. QuickPanel. isOpened = true;
});
},
'Closed ': function () {// defines the method to close the panel.
Unzip panel.css ({"right": "0"}). show (). animate ({
"Right": "-272px"
}, Function (){
$ Masklayer. fadeOut (); // the fade-out mask. A problem occurs when I click it quickly...
Window. QuickPanel. isOpened = false;
$ Panel. hide (); // After the animation ends, hide the menu. No scroll bar exists.
});
}
};

This is the most important part. I encapsulated a quickpanel function, which contains two methods: open and closed. It is convenient for other dom elements to click and call, the final implementation is the effect shown in the figure,

Ps: there is a problem here. the scroll bar will appear during the sliding process. This is actually very bad. Can you solve it ?? I have put the attachment to the resource. Please download and run it. If something is wrong, please leave a message and submit it ~~ Thank you very much.