How to implement side sliding menu in MUI-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement side sliding menu in MUI

亚连

Jun 09, 2018 pm 03:42 PM

muiup and downSide menuslide

Below I will share with you an article on how to implement MUI side-sliding menu and its main part to slide up and down. It has a good reference value and I hope it will be helpful to everyone.

The introduction of the side-sliding menu in the MUI document does not explain how to implement side-sliding. The MUI side-sliding menu does not have the up and down sliding function by default and needs to be activated.

1. First add the ID to the element of class="mui-scroll-wrapper":

<!-- 侧滑导航根容器 -->
<p class="mui-off-canvas-wrap mui-draggable">
 <!-- 菜单容器 -->
 <aside class="mui-off-canvas-left">
  <p id="offCanvasSideScroll" class="mui-scroll-wrapper">
   <p class="mui-scroll">
    <!-- 菜单具体展示内容 -->
    ...
   </p>
  </p>
 </aside>
 <!-- 主页面容器 -->
 <p class="mui-inner-wrap">
  <!-- 主页面标题 -->
  <header class="mui-bar mui-bar-nav">
   <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
   <h1 id="标题">标题</h1>
  </header>
  <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
   <p class="mui-scroll">
    <!-- 主界面具体展示内容 -->
    ...
   </p>
  </p> 
 </p>
</p>

As can be seen from the above example , IDs are added to both the side sliding menu and the main part.

are: offCanvasSideScroll, offCanvasContentScroll

2. Secondly, activate in JS:

mui(&#39;#offCanvasSideScroll&#39;).scroll(); 
mui(&#39;#offCanvasContentScroll&#39;).scroll();

You’re done. Now you can slide down after exceeding the height. Note that it exceeds the height! Just like a browser, if the "specific display content of the main interface" does not exceed the range, there is no sliding function.

MUI: MUI sliding menu.

Complete code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"></script>
  <link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
  	body{
  		background-color: #000000;
  	}
  	.mui-off-canvas-wrap{
  		max-width: 720px;
  		margin: 0 auto;
  	}
  </style>
</head>
<body>
	<!-- 侧滑导航根容器 --> 
	<p class="mui-off-canvas-wrap mui-draggable"> 
	 <!-- 菜单容器 --> 
	 <aside class="mui-off-canvas-left"> 
	  <p id="offCanvasSideScroll" class="mui-scroll-wrapper"> 
	   <p class="mui-scroll"> 
	    <!-- 菜单具体展示内容 --> 
	    <p style="height:1000px">
	    	
	    </p>
	   </p> 
	  </p> 
	 </aside> 
	 <!-- 主页面容器 --> 
	 <p class="mui-inner-wrap"> 
	  <!-- 主页面标题 --> 
	  <header class="mui-bar mui-bar-nav"> 
	   <a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> 
	   <h1 id="标题">标题</h1> 
	  </header> 
	  <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> 
	   <p class="mui-scroll"> 
	    <!-- 主界面具体展示内容 --> 
	    <p style="height:1000px">
	    	
	    </p>
	   </p> 
	  </p>  
	 </p> 
	</p>
	
	<script type="text/javascript" charset="utf-8">
		$("#left-menu").on(&#39;tap&#39;, function (event) {
			mui(&#39;.mui-off-canvas-wrap&#39;).offCanvas(&#39;show&#39;);
		});
		
		window.onload = function(){
	   	mui(&#39;#offCanvasSideScroll&#39;).scroll(); 
			mui(&#39;#offCanvasContentScroll&#39;).scroll(); 
		}
  </script>
</body>
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement the exchange method of two variable values in JS

How to implement custom instructions in Vue ?

How to modify the style of child components through parent components in vue

The above is the detailed content of How to implement side sliding menu in MUI. For more information, please follow other related articles on the PHP Chinese website!

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

手机屏幕不好滑动干涩怎么办Dec 04, 2023 pm 03:51 PM

手机屏幕不好滑动干涩的解决办法：1、给屏幕加湿；2、定期清洁屏幕；3、增加手指的滑动力度；4、使用手机膜；5、更换保护套；6、保持手部湿润；7、贴膜时处理干净；8、使用润滑剂；9、使用手套；10、调整屏幕亮度；11、更换手机。详细介绍：1、给屏幕加湿，在屏幕旁边放置一个加湿器或者喷一些水，让空气中的湿度增加，从而减少屏幕的干燥感；2、定期清洁屏幕，使用专业的屏幕清洁剂等等。

JavaScript 如何实现图片的上下滑动切换效果并加入淡入淡出动画？Oct 20, 2023 am 11:19 AM

JavaScript如何实现图片的上下滑动切换效果并加入淡入淡出动画？在网页开发中，经常需要实现图片的切换效果，可以通过JavaScript来实现上下滑动切换，并且加入淡入淡出的动画效果，下面我们来具体了解一下。首先，我们需要一个包含多张图片的容器，可以使用HTML中的div标签来承载图片。例如，我们创建一个id为"image-container"的div来

JavaScript 如何实现图片的上下拖动切换效果？Oct 18, 2023 am 09:09 AM

JavaScript如何实现图片的上下拖动切换效果？随着互联网的发展，图片在我们生活和工作中扮演着重要的角色。为了提升用户体验，我们常常需要给图片增加一些特效或交互效果。其中，图片的上下拖动切换效果是一种很常见、简洁且实用的效果。本文将介绍如何使用JavaScript实现这一效果，并提供具体的代码示例。首先，我们需要创建一个HTML文件，来展示图片并实现拖

HTML、CSS和jQuery：实现滑动面板效果的技术指南Oct 27, 2023 pm 04:39 PM

HTML、CSS和jQuery：实现滑动面板效果的技术指南随着移动设备的普及和Web应用的发展，滑动面板作为一种流行的交互方式，在网页设计中越来越常见。通过实现滑动面板效果，我们可以在有限的空间内展示更多的内容，提升用户体验。本文将详细介绍如何使用HTML、CSS和jQuery来实现滑动面板效果，并提供具体的代码示例。HTML结构首先，我们需要创建一个基本的

jQuery滑动事件解读：实现原理及注意事项Feb 27, 2024 am 10:57 AM

jQuery滑动事件解读：实现原理及注意事项在前端开发中，滑动事件是常见且常用的交互操作之一，通过滑动事件，我们可以实现诸如轮播图的切换、页面的滚动加载等功能。而jQuery作为一款流行的JavaScript库，提供了丰富的滑动事件处理方法，方便我们实现各种交互效果。本文将深入探讨jQuery中的滑动事件实现原理及注意事项，并提供具体的代码示例。一、实现原理

react怎么实现滑动Dec 30, 2022 am 11:09 AM

react实现滑动的方法：1、在onTouchStart事件找到touches，根据identifier中记录新的touch出现；2、在onTouchMove事件中根据identifier来记录每个touch经过的点的坐标；3、在onTouchEnd事件中，找到结束的touch事件，然后通过结束的touch事件划过的点来计算要执行的手势即可。

mui和vue的区别Dec 13, 2023 am 10:42 AM

mui和vue的区别：1、MUI 是一个UI框架，而Vue是一个完整的JavaScript框架；2、MUI主要用于构建符合Material Design风格的Web应用，而Vue用于构建各类Web应用；3、MUI主要用于提供UI组件和样式，Vue用于构建复杂的Web应用。

PHP实现微信小程序侧滑菜单技巧May 31, 2023 pm 11:40 PM

随着微信小程序的火爆，越来越多的开发者开始使用它来开发各种应用。而在小程序中，侧滑菜单是常见的UI界面，用户可以通过左右滑动来打开或关闭菜单。本文将介绍如何使用PHP实现微信小程序侧滑菜单技巧。一、前提条件在开始介绍如何实现微信小程序侧滑菜单之前，需要了解一些前提条件：1.了解微信小程序的基本开发知识，包括小程序架构、JS、CSS、HTML等。2.要会使用P

See all articles