PHP中文网-QQ群-扫二维码

QQ群

PHP中文网-关注微信公众号-扫二维码

微信公众号

当前位置:php中文网下载站 >js特效 >html5特效 >HTML5手机右侧滑动导航下拉菜单代码

HTML5手机右侧滑动导航下拉菜单代码

2018-05-07 来源/作者:php中文网 分类:html5特效 «» 下载次数:4
HTML5手机右侧滑动导航下拉菜单代码

代码:

<link rel="stylesheet" href="css/mdui.css?3.1.50" />

<link rel="stylesheet" href="css/app.css?3.1.50" />

</head>
<body>

<header>
<a class="backprev" href="javascript:history.back(-1);">
<i class="mdui-icon material-icons">&#xe314;</i>
</a>
<div class="head-middle">列表页</div>
<div class="head-right">
<button class="mdui-btn app-btn" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">&#xe5d3;</i></button>
<div class="mdui-drawer mdui-drawer-right mdui-drawer-close" id="left-drawer">

<ul class="mdui-list app-slide-menu app-collapse-menu" mdui-collapse="{accordion: true}">
  <li class="mdui-list-item mdui-ripple app-list-home ">
  <a href="#" class="app-list-item-link mdui-text-left ">
  <div class="mdui-list-item-content">
<i class="mdui-list-item-icon mdui-icon material-icons">
  &#xe88a;
  </i>首页
  </div>
  </a>
  </li>
<li class="mdui-collapse-item  app-hide-list  app-collapse-list">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple  mdui-p-x-0">
<div class="menu-click mdui-list-item-content mdui-text-left" onClick="">
一级栏目
<i class="mdui-collapse-item-arrow mdui-icon material-icons mdui-float-right">
&#xe5cc;
</i>
</div>
</div>
<ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
<li class="mdui-list-item mdui-ripple app-sub-list  app-hide-list">
<a href="#" class="app-list-item-link mdui-text-left">
二级栏目
</a>
</li>
<li class="mdui-list-item mdui-ripple app-sub-list  app-hide-list">
<a href="#" class="app-list-item-link mdui-text-left">
二级栏目
</a>
</li>
</ul>
</li>
<li class="mdui-collapse-item  app-hide-list  app-collapse-list">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple  mdui-p-x-0">
<div class="menu-click mdui-list-item-content mdui-text-left" onClick="">
一级栏目
<i class="mdui-collapse-item-arrow mdui-icon material-icons mdui-float-right">
&#xe5cc;
</i>
</div>
</div>
<ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
<li class="mdui-list-item mdui-ripple app-sub-list  app-hide-list">
<a href="#" class="app-list-item-link mdui-text-left">
二级栏目
</a>
</li>
<li class="mdui-list-item mdui-ripple app-sub-list  app-hide-list">
<a href="#" class="app-list-item-link mdui-text-left">
二级栏目
</a>
</li>
<li class="mdui-list-item mdui-ripple app-sub-list  app-hide-list">
<a href="#" class="app-list-item-link mdui-text-left">
二级栏目
</a>
</li>
<li class="mdui-list-item mdui-ripple app-sub-list  app-hide-list">
<a href="#" class="app-list-item-link mdui-text-left">
二级栏目
</a>
</li>
</ul>
</li>
<li class="mdui-collapse-item app-hide-list  app-collapse-list">
  <a href="#" class=" mdui-list-item mdui-ripple  mdui-p-x-0">
<div class="menu-click mdui-list-item-content mdui-text-left">
一级栏目 
<i class="mdui-collapse-item-arrow mdui-icon material-icons mdui-float-right">
&#xe5cc;
</i>
</div>
</a>
</li>
</ul>
</div>
</div> 
</header>

<script src="js/mdui.js?3.1.50"></script>


申明:PHP中文网下载站匠心打造中国最大的免费下载站!一切资源免费,所有资源都经过检测,请放心下载!

效果预览本地下载  新手使用求助QQ群: