登录  /  注册
首页 > web前端 > js教程 > 正文

MUI实现侧滑菜单效果

小云云
发布: 2018-01-27 09:47:51
原创
2914人浏览过

在mui文档的侧滑菜单介绍里没有说明如何实现侧滑,而mui侧滑菜单默认是没有上下滑动功能的,需要激活。本文主要为大家分享一篇mui 实现侧滑菜单及其主体部分上下滑动的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

1、首先在 class="mui-scroll-wrapper" 的元素上添加ID:

<!-- 侧滑导航根容器 -->
<p>
 <!-- 菜单容器 -->
 <aside>
  <p>
   </p>
<p>
    <!-- 菜单具体展示内容 -->
    ...
   </p>
  </aside></p>
 
 <!-- 主页面容器 -->
 <p>
  <!-- 主页面标题 -->
  <header>
   <a></a>
   <h1>标题</h1>
  </header>
  </p><p>
   </p><p>
    <!-- 主界面具体展示内容 -->
    ...
   </p>
   
 
登录后复制

从上面例子可以看出,侧滑菜单和主体部分都添加了ID。

分别为:offCanvasSideScroll、offCanvasContentScroll

2、其次在JS里面激活:

mui('#offCanvasSideScroll').scroll(); 
mui('#offCanvasContentScroll').scroll();
登录后复制

大功告成,现在超过高度即可进行下滑了。注意是超过高度!就像浏览器一样,如果“ 主界面具体展示内容”没有超出范围,是没有下滑功能的。

MUI:MUI 侧滑菜单。

完整代码:

nbsp;html&gt;


  <meta>
  <meta>
  <title></title>
  <script></script>
  <link>
  <script></script>
  <style>
  	body{
  		background-color: #000000;
  	}
  	.mui-off-canvas-wrap{
  		max-width: 720px;
  		margin: 0 auto;
  	}
  </style><!-- 侧滑导航根容器 --> 
	<p> 
	 <!-- 菜单容器 --> 
	 <aside> 
	  <p> 
	   </p>
<p> 
	    <!-- 菜单具体展示内容 --> 
	    </p>
<p>
	    	
	    </p>
	   </aside></p> 
	   
	  
	 <!-- 主页面容器 --> 
	 <p> 
	  <!-- 主页面标题 --> 
	  <header> 
	   <a></a> 
	   <h1>标题</h1> 
	  </header> 
	  </p><p> 
	   </p><p> 
	    <!-- 主界面具体展示内容 --> 
	    </p><p>
	    	
	    </p>
	    
	    
	  
	
	
	<script>
		$("#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>
登录后复制

相关推荐:

CSS3模拟侧滑菜单_html/css_WEB-ITnose

CSS3手机端侧滑菜单 4种滑动菜单特效_html/css_WEB-ITnose

CSS3仿SF Android版的侧滑菜单_html/css_WEB-ITnose

以上就是MUI实现侧滑菜单效果的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号