以下是一个简单的
mui下拉菜单代码示例：
HTML:
```
<header class="
mui-bar
mui-bar-nav">
<a class="
mui-action-menu
mui-icon
mui-icon-bars
mui-pull-left"></a>
<h1 class="
mui-title">下拉菜单</h1>
</header>
<div class="
mui-content">
<div class="
mui-content-padded">
<p>点击左上角菜单按钮展示下拉菜单</p>
</div>
<ul class="
mui-table-view
mui-table-view-chevron">
<li class="
mui-table-view-cell">
<a href="#">菜单项1</a>
</li>
<li class="
mui-table-view-cell">
<a href="#">菜单项2</a>
</li>
<li class="
mui-table-view-cell">
<a href="#">菜单项3</a>
</li>
</ul>
</div>
```
CSS:
```
.
mui-bar-nav a.
mui-action-menu {
font-size: 24px;
}
```
JavaScript:
```
mui.init({
swipeBack: false
});
var menuWrapper = document.getElementById('menu-wrapper');
var menu = document.getElementById('menu');
var menuWrapperClassList = menuWrapper.classList;
var backdrop = document.getElementById('menu-backdrop');
document.getElementById('show-menu').addEventListener('tap', function() {
menuWrapperClassList.add('
mui-active');
backdrop.addEventListener('tap', closeMenu);
menu.addEventListener('webkitTransitionEnd', menuTransitionEnd);
backdrop.show();
});
var closeMenu = function() {
menuWrapperClassList.remove('
mui-active');
backdrop.removeEventListener('tap', closeMenu);
menu.removeEventListener('webkitTransitionEnd', menuTransitionEnd);
backdrop.hide();
}
var menuTransitionEnd = function(e) {
if (e.target === menu) {
backdrop.removeEventListener('tap', closeMenu);
backdrop.addEventListener('tap', closeMenu);
}
}
```
注：以上代码需要引入
mui.css和
mui.js文件。
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
