當前位置：
首頁 >
导航菜单
發布時間：2025/4/16
24
豆豆
相關樣式
方向：水平 默認的
?垂直 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>導航</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>水平導航菜單</legend> </fieldset> <ul class="layui-nav"><li class="layui-nav-item"><a href="">最新活動</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">產品</a><dl class="layui-nav-child"><dd><a href="">選項1</a></dd><dd class="layui-this"><a href="">選項2</a></dd><dd><a href="">選項3</a></dd></dl></li><li class="layui-nav-item"><a href="">大數據</a></li><li class="layui-nav-item"><a href="javascript:;">解決方案</a><dl class="layui-nav-child"><dd><a href="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd class="layui-this"><a href="">選中項</a></dd><dd><a href="">電商平臺</a></dd></dl></li><li class="layui-nav-item"><a href="">社區</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>垂直導航菜單</legend> </fieldset> <ul class="layui-nav layui-nav-tree"><li class="layui-nav-item"><a href="">最新活動</a></li><li class="layui-nav-item layui-this"><a href="javascript:;">產品</a><dl class="layui-nav-child"><dd><a href="">選項1</a></dd><dd><a href="">選項2</a></dd><dd><a href="">選項3</a></dd></dl></li><li class="layui-nav-item"><a href="">大數據</a></li><li class="layui-nav-item"><a href="javascript:;">解決方案</a><dl class="layui-nav-child"><dd><a href="">移動模塊</a></dd><dd><a href="">后臺模版</a></dd><dd class="layui-this"><a href="">選中項</a></dd><dd><a href="">電商平臺</a></dd></dl></li><li class="layui-nav-item"><a href="">社區</a></li> </ul><script src="resources/layui/layui.js"></script> <script type="text/javascript">layui.use(['element'],function(){}) </script></body> </html>
?
總結
- 上一篇： layui——按钮
- 下一篇： 面板——卡片面板、常规折叠面板、手风琴折