mdui实现右侧弹出多级菜单效果代码
代码语言：html
所属分类：菜单导航
代码描述：mdui实现右侧弹出多级菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>手机端侧边滑出导航菜单</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mdui.min.css">
<style>
/*遮罩层*/.hide{ display: none;}/*首页*/header{ height:48px; line-height: 48px; text-align: center; font-size:1.5em; background-color: #00b355; color:#fff;}/*列表页*/.backprev{ float:left; width: 15%; text-align: center; color: #fff; height: 48px; line-height: 48px;}.head-middle{ width: 70%; text-align: center; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.head-right{ float:right; text-align: center; width:15%;}.app-hide-list i{ margin-top: -3px; margin-right: 5px;}.app-hide-list{ background: #f5f5f5; margin:5px 0; color:#007d3c;}.app-slide-menu .mdui-list-item-content{ text-align: left; padding-left: .8em;}.app-collapse-menu{ margin:0 16px;}.app-list-home{ padding:0; margin:5px 0 10px; background: #00b355;}.app-list-home:hover{ background: #00b355;}.app-list-home i{ margin-top: -3px; margin-right: 5px; color:#fff;}.app-list-home a{ color:#fff;}.app-list-item-link{ color:#fff; display: block; width:100%; text-align: left;}.mdui-collapse-item-body .app-sub-list{ padding:0 ; margin: 8px; background: #fff;}.mdui-collapse-item-body .app-sub-list a{ padding-left:23px;}.app-collapse-list{ margin:10px 0;}.menu-click{ background: #e1fff0;}.app-btn{ min-width: 100%; text-align: center; padding:0;}
</style>
</head>
<body>
<header><a class="backprev" href="javascript:history.back(-1);"><i class="mdui-icon material-icons"></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"></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">  </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 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0