Home > Article > Web Front-end > Xiaoqiang’s HTML5 mobile development road (41) - Side Menu implementation in jqMobi (similar to Renren)

Xiaoqiang’s HTML5 mobile development road (41) - Side Menu implementation in jqMobi (similar to Renren)

黄舟Original: 2017-02-15 13:13:261521browse

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>

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博客：http://www.php.cn/
            </p>
        </p>
    </p>
</body>
</html>

##Next we will add a c787b9a589a3ece771e842a6176cf8e9 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博客：http://www.php.cn/
            </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>

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博客：http://www.php.cn/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：http://www.php.cn/
            </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>

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博客：http://www.php.cn/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：http://www.php.cn/
            </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>

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博客：http://www.php.cn/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer" data-nav="android_nav" data-tab="footer_android">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：http://www.php.cn/
            </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>

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 (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Xiaoqiang’s road to HTML5 mobile development (40) - several ways to practice header definition in jqMobiNext article：Xiaoqiang’s road to HTML5 mobile development (40) - several ways to practice header definition in jqMobi

See more

Xiaoqiang’s HTML5 mobile development road (41) - Side Menu implementation in jqMobi (similar to Renren)

Related articles