Xiaoqiang's HTML5 mobile development road (41) - Side Menu implementation in jqMobi (similar to Renren)-H5 Tutorial-php.cn

I remember that when I was making Native Apps, the side sliding effect similar to Renren.com was very popular. Many apps were developed imitating this effect. There is also a similar effect in jqMobi called Side Menu. Let’s take a step below. Achieve this effect in one step.

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

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    
    </p>
</body>
</html>

Copy after login

Then add a panel as follows

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel">
            	欢迎访问大碗干拌CSDN博客：//m.sbmmt.com/
            </p>
        </p>
    </p>
</body>
</html>

Copy after login

##Next we will add a

at the same level of the panel tag Next

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel">
            	欢迎访问大碗干拌CSDN博客：//m.sbmmt.com/
            </p>
        </p>
        <nav>
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">Android</a></li>
                <li><a class="icon home mini" href="">Linux</a></li>
                <li><a class="icon home mini" href="">HTML5</a></li>
            </ul>
        </nav>
    </p>
</body>
</html>

Copy after login

Next we will add a panel and add header and footer

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">
            	欢迎访问大碗干拌CSDN博客：//m.sbmmt.com/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：//m.sbmmt.com/
            </p>
        </p>
        <header id="custom_header">
        	<h1>大碗干拌欢迎您</h1>
            <a class="button" style="float:right;" class="icon home"></a>
        </header>
        <footer id="custom_footer">
        	<a href="#home" class="icon info">HOME</a>
            <a href="#android" class="icon info">Android</a>
        </footer>
        <nav>
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">Android</a></li>
                <li><a class="icon home mini" href="">Linux</a></li>
                <li><a class="icon home mini" href="">HTML5</a></li>
            </ul>
        </nav>
    </p>
</body>
</html>

Copy after login

We will find that the side menu corresponding to the two panels is the same at this time. Below we provide the Specify a side menu

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav">
            	欢迎访问大碗干拌CSDN博客：//m.sbmmt.com/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：//m.sbmmt.com/
            </p>
        </p>
        <header id="custom_header">
        	<h1>大碗干拌欢迎您</h1>
            <a class="button" style="float:right;" class="icon home"></a>
        </header>
        <footer id="custom_footer">
        	<a href="#home" class="icon info">HOME</a>
            <a href="#android" class="icon info">Android</a>
        </footer>
        <nav id="main_nav">
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">Android</a></li>
                <li><a class="icon home mini" href="">Linux</a></li>
                <li><a class="icon home mini" href="">HTML5</a></li>
            </ul>
        </nav>
         <nav id="android_nav">
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">文章一</a></li>
                <li><a class="icon home mini" href="">文章二</a></li>
                <li><a class="icon home mini" href="">文章三</a></li>
            </ul>
        </nav>
    </p>
</body>
</html>

Copy after login

We will find that the side menu belongs to the panel. Each panel can specify a side menu for itself, or it can share a side menu

The biggest problem now is how to make the side menu above have a left and right sliding effect. This can be achieved by introducing the following js

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8" src="./plugins/af.css3animate.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/af.scroller.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/af.touchEvents.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/af.touchLayer.js"></script>

<script type="text/javascript" charset="utf-8" src="./ui/transitions/fade.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/transitions/flip.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/transitions/slide.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/transitions/slideDown.js"></script>
<script type="text/javascript" charset="utf-8" src="./ui/transitions/slideUp.js"></script>

<script type="text/javascript" charset="utf-8" src="./plugins/af.slidemenu.js"></script>

<script type="text/javascript">
	if (!((window.DocumentTouch && document instanceof DocumentTouch) || &#39;ontouchstart&#39; in
			window)) {
		var script = document.createElement("script");
		script.src = "plugins/af.desktopBrowsers.js";
		var tag = $("head").append(script);
	}
</script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer" data-nav="main_nav" data-tab="footer_home">
            	欢迎访问大碗干拌CSDN博客：//m.sbmmt.com/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav" data-tab="footer_android">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：//m.sbmmt.com/
            </p>
        </p>
        <header id="custom_header">
        	<h1>大碗干拌欢迎您</h1>
            <a class="button" style="float:right;" class="icon home"></a>
        </header>
        <footer id="custom_footer">
        	<a id="footer_home" href="#home" class="icon info">HOME</a>
            <a id="footer_android" href="#android" class="icon info">Android</a>
        </footer>
        <nav id="main_nav">
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">Android</a></li>
                <li><a class="icon home mini" href="">Linux</a></li>
                <li><a class="icon home mini" href="">HTML5</a></li>
            </ul>
        </nav>
         <nav id="android_nav">
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">文章一</a></li>
                <li><a class="icon home mini" href="">文章二</a></li>
                <li><a class="icon home mini" href="">文章三</a></li>
            </ul>
        </nav>
    </p>
</body>
</html>

Copy after login

The above is Xiaoqiang’s HTML5 mobile development road (41) - the content of Side Menu implementation in jqMobi (similar to Renren), more For related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!