github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

更新 nav 导航菜单浅色背景主题示例

pull/1134/head
贤心 2022-09-03 20:19:33 +08:00
parent a8e90a196b
commit ff40f49df4
1 changed files with 122 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
examples/element.nav.html
View File

@ -1,15 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>导航 - 常用元素 - layui</title> <title>导航 - 常用元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link rel="stylesheet" href="../src/css/layui.css"> <style>
body{padding: 16px;}
<style> .demo-nav-tree>.layui-inline{vertical-align: top;}
body{padding:20px;} </style>
</style>
</head> </head>
<body> <body>
@ -107,69 +106,131 @@ body{padding:20px;}
<li class="layui-nav-item"><a href="">社区</a></li> <li class="layui-nav-item"><a href="">社区</a></li>
</ul> </ul>
<br><br> <br>
<ul class="layui-nav layui-nav-tree" lay-filter="test"> <ul class="layui-nav layui-bg-gray">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a class="" href="javascript:;">产品</a> <a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd> <dd><a href="">移动模块</a></dd>
<dd> <dd class="layui-this"><a href="">后台模版</a></dd>
<a href="javascript:;">后台模版</a> <dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<div class="demo-nav-tree">
<div class="layui-inline">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="javascript:;">组件一</a></dd> <dd><a href="javascript:;">移动模块</a></dd>
<dd> <dd>
<a href="javascript:;">组件二</a> <a href="javascript:;">后台模版</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">组件一</a></dd>
<dd>
<a href="javascript:;">组件二</a>
</dd>
<dd><a href="javascript:;">组件三</a></dd>
</dl>
</dd> </dd>
<dd><a href="javascript:;">组件三</a></dd> <dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl> </dl>
</dd> </li>
<dd><a href="javascript:;">电商平台</a></dd> <li class="layui-nav-item">
<dd><a href="">跳转菜单</a></dd> <a href="javascript:;">解决方案</a>
</dl> <dl class="layui-nav-child">
</li> <dd><a href="javascript:;">移动模块</a></dd>
<li class="layui-nav-item"> <dd>
<a href="javascript:;">解决方案</a> <a href="javascript:;">后台模版</a>
<dl class="layui-nav-child"> </dd>
<dd><a href="javascript:;">移动模块</a></dd> <dd><a href="">电商平台</a></dd>
<dd> </dl>
<a href="javascript:;">后台模版</a> </li>
</dd> <li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
<dd><a href="">电商平台</a></dd> <li class="layui-nav-item"><a href="">社区</a></li>
</dl> </ul>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br><br> </div>
<div class="layui-inline">
<ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test"> <ul class="layui-nav layui-nav-tree layui-bg-gray" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed"> <li class="layui-nav-item">
<a class="" href="javascript:;">产品</a> <a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd> <dd><a href="javascript:;">移动模块</a></dd>
<dd> <dd>
<a href="javascript:;">后台模版</a> <a href="javascript:;">后台模版</a>
</dd> <dl class="layui-nav-child">
<dd><a href="javascript:;">电商平台</a></dd> <dd><a href="javascript:;">组件一</a></dd>
<dd><a href="">跳转菜单</a></dd> <dd>
</dl> <a href="javascript:;">组件二</a>
</li> </dd>
<li class="layui-nav-item"> <dd><a href="javascript:;">组件三</a></dd>
<a href="javascript:;">解决方案</a> </dl>
<dl class="layui-nav-child"> </dd>
<dd><a href="javascript:;">移动模块</a></dd> <dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="javascript:;">后台模版</a></dd> <dd><a href="">跳转菜单</a></dd>
<dd><a href="">电商平台</a></dd> </dl>
</dl> </li>
</li> <li class="layui-nav-item">
<li class="layui-nav-item"><a href="">云市场</a></li> <a href="javascript:;">解决方案</a>
<li class="layui-nav-item"><a href="">社区</a></li> <dl class="layui-nav-child">
</ul> <dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</div>
<div class="layui-inline">
<br><br> <ul class="layui-nav layui-bg-cyan layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd>
<a href="javascript:;">后台模版</a>
</dd>
<dd><a href="javascript:;">电商平台</a></dd>
<dd><a href="">跳转菜单</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">移动模块</a></dd>
<dd><a href="javascript:;">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
</div>
</div>
<br>
<br>
<span class="layui-breadcrumb"> <span class="layui-breadcrumb">
<a href="">首页</a> <a href="">首页</a>