HTML5 mobile development path (1) -- Side Menu implementation in jqMobi (similar to Renren)

I remember that when I was using a Native App, the sliding effect on the Side of Renren's web page was very hot. Many apps were developed based on this effect. In jqMobi, similar effects were also called Side Menu. next, we will implement this effect step by step.

First, create an html file and introduce the jqMobi framework as follows:

Next, add a panel as follows:

 

 

Next, we will add a <nav> label under the same level of panel

Next, we will add a panel and add header and footer.

 

 

At this time, we will find that the two panels correspond to the same side menu. Next we will specify a side menu for each panel.

We will find that the side menu belongs to the panel. You can specify a side menu for each panel, or share a side menu.

The biggest problem now is how to make the above side menu slide between the left and right. The following js can be introduced to achieve