导航菜单
相關(guān)樣式
方向：水平 默認(rèn)的
?垂直 layui-nav-tree
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>導(dǎo)航</title><link rel="stylesheet" href="resources/layui/css/layui.css"> </head> <body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>水平導(dǎo)航菜單</legend> </fieldset> <ul class="layui-nav"><li class="layui-nav-item"><a href="">最新活動(dòng)</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">產(chǎn)品</a><dl class="layui-nav-child"><dd><a href="">選項(xiàng)1</a></dd><dd class="layui-this"><a href="">選項(xiàng)2</a></dd><dd><a href="">選項(xiàng)3</a></dd></dl></li><li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li><li class="layui-nav-item"><a href="javascript:;">解決方案</a><dl class="layui-nav-child"><dd><a href="">移動(dòng)模塊</a></dd><dd><a href="">后臺(tái)模版</a></dd><dd class="layui-this"><a href="">選中項(xiàng)</a></dd><dd><a href="">電商平臺(tái)</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li><li class="layui-nav-item" lay-unselect="" style="float: right;"><a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</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></li> </ul><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>垂直導(dǎo)航菜單</legend> </fieldset> <ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="">最新活動(dòng)</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">產(chǎn)品</a><dl class="layui-nav-child"><dd><a href="">選項(xiàng)1</a></dd><dd><a href="">選項(xiàng)2</a></dd><dd><a href="">選項(xiàng)3</a></dd></dl></li><li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li><li class="layui-nav-item"><a href="javascript:;">解決方案</a><dl class="layui-nav-child"><dd><a href="">移動(dòng)模塊</a></dd><dd><a href="">后臺(tái)模版</a></dd><dd class="layui-this"><a href="">選中項(xiàng)</a></dd><dd><a href="">電商平臺(tái)</a></dd></dl></li><li class="layui-nav-item"><a href="">社區(qū)</a></li> </ul><script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use(['element'],function(){}) </script></body> </html>
?
總結(jié)
- 上一篇： layui——按钮
- 下一篇： 面板——卡片面板、常规折叠面板、手风琴折