MUI-最接近原生APP体验的高性能前端框架
mui侧滑导航(左侧)效果图:
导入mui控件需要的css,js文件:
<link href="../resources/ui/mui-master/dist/css/mui.css" rel="stylesheet"/>
<script type="text/javascript" src="../resources/js/jquery.js"></script>
<script type="text/javascript" src="../resources/ui/mui-master/js/mui.min.js"></script>
<script type="text/javascript" src="../resources/ui/layer/laytpl.js"></script>
实现mui侧滑导航的效果很简单,只需要添加一些class样式就可以实现。
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<!--header-->
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasSide" class="mui-icon-bars mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="title">事项审批(人事)</h1>
</header>
<!--侧滑菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSi