console
(function(){
layui.use(['element'], function() {
var element = layui.element;
element.init();
element.render('nav');
element.on('nav(menu)', function(data) {
console.log('点击了');
});
});
}());
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<!-- 头部区域 -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item layadmin-flexible" lay-unselect="">
<a href="javascript:void(0);" layadmin-event="flexible" title="侧边伸缩">
<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible">
</i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="http://www.layui.com/admin/" target="_blank" title="前台">
<i class="layui-icon layui-icon-website">
</i>
</a>
</li>
<li class="layui-nav-item" lay-unselect="">
<a href="javascript:void(0);" layadmin-event="refresh" title="刷新">
<i class="layui-icon layui-icon-refresh-3">
</i>
</a>
</li>
</ul>
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
<li class="layui-nav-item" lay-unselect="">
<a lay-href="app/message/" layadmin-event="message">
<i class="layui-icon layui-icon-notice">
</i>
<span class="layui-badge-dot">
</span>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="javascript:void(0);" layadmin-event="theme">
<i class="layui-icon layui-icon-theme">
</i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="javascript:void(0);" layadmin-event="note">
<i class="layui-icon layui-icon-note">
</i>
</a>
</li>
<li class="layui-nav-item" lay-unselect="">
<span class="layui-nav-more">
</span>
<dl class="layui-nav-child">
<dd>
<a lay-href="set/base/website">
基本资料
</a>
</dd>
<dd>
<a lay-href="set/security/">
安全设置
</a>
</dd>
<hr>
<dd layadmin-event="logout" style="text-align: center;">
<a>
退出
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="javascript:void(0);" layadmin-event="about">
<i class="layui-icon layui-icon-more-vertical">
</i>
</a>
</li>
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect="">
<a href="javascript:void(0);" layadmin-event="more">
<i class="layui-icon layui-icon-more-vertical">
</i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-side-menu">
<div class="layui-side-scroll">
<div class="layui-logo" lay-href="">
<span>
layuiAdmin Pro
</span>
</div>
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
lay-filter="layadmin-system-side-menu">
<li data-name="component" data-jump="" class="layui-nav-item layui-nav-itemed">
<a href="javascript:void(0);" lay-tips="组件" lay-direction="2">
<i class="layui-icon layui-icon-component">
</i>
<cite>
组件
</cite>
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="grid" data-jump="">
<a href="javascript:void(0);">
栅格
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="list" data-jump="">
<a href="javascript:void(0);" lay-href="component/grid/list">
等比例列表排列
</a>
</dd>
<dd data-name="mobile" data-jump="">
<a href="javascript:void(0);" lay-href="component/grid/mobile">
按移动端排列
</a>
</dd>
<dd data-name="mobile-pc" data-jump="">
<a href="javascript:void(0);" lay-href="component/grid/mobile-pc">
移动桌面端组合
</a>
</dd>
<dd data-name="all" data-jump="">
<a href="javascript:void(0);" lay-href="component/grid/all">
全端复杂组合
</a>
</dd>
<dd data-name="stack" data-jump="">
<a href="javascript:void(0);" lay-href="component/grid/stack">
低于桌面堆叠排列
</a>
</dd>
<dd data-name="speed-dial" data-jump="">
<a href="javascript:;" lay-href="component/grid/speed-dial">
九宫格
</a>
</dd>
</dl>
</dd>
<dd data-name="button" data-jump="">
<a href="javascript:void(0);" lay-href="component/button/">
按钮
</a>
</dd>
<dd data-name="form" data-jump="">
<a href="javascript:void(0);">
表单
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="element" data-jump="">
<a href="javascript:void(0);" lay-href="component/form/element">
表单元素
</a>
</dd>
<dd data-name="group" data-jump="">
<a href="javascript:;" lay-href="component/form/group">
表单组合
</a>
</dd>
</dl>
</dd>
<dd data-name="nav" data-jump="">
<a href="javascript:void(0);" lay-href="component/nav/">
导航
</a>
</dd>
<dd data-name="tabs" data-jump="">
<a href="javascript:;" lay-href="component/tabs/">
选项卡
</a>
</dd>
<dd data-name="progress" data-jump="">
<a href="javascript:void(0);" lay-href="component/progress/">
进度条
</a>
</dd>
<dd data-name="panel" data-jump="">
<a href="javascript:;" lay-href="component/panel/">
面板
</a>
</dd>
<dd data-name="badge" data-jump="">
<a href="javascript:;" lay-href="component/badge/">
徽章
</a>
</dd>
<dd data-name="timeline" data-jump="">
<a href="javascript:;" lay-href="component/timeline/">
时间线
</a>
</dd>
<dd data-name="anim" data-jump="">
<a href="javascript:void(0);" lay-href="component/anim/">
动画
</a>
</dd>
<dd data-name="auxiliar" data-jump="">
<a href="javascript:void(0);" lay-href="component/auxiliar/">
辅助
</a>
</dd>
<dd data-name="layer" data-jump="">
<a href="javascript:void(0);">
通用弹层
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="list" data-jump="">
<a href="javascript:void(0);" lay-href="component/layer/list">
功能演示
</a>
</dd>
<dd data-name="special-demo" data-jump="">
<a href="javascript:void(0);" lay-href="component/layer/special-demo">
特殊示例
</a>
</dd>
<dd data-name="theme" data-jump="">
<a href="javascript:void(0);" lay-href="component/layer/theme">
风格定制
</a>
</dd>
</dl>
</dd>
<dd data-name="laydate" data-jump="">
<a href="javascript:void(0);" lay-href="component/laydate/">
日期时间
</a>
</dd>
<dd data-name="table" data-jump="">
<a href="javascript:void(0);" lay-href="component/table/">
表格
</a>
</dd>
<dd data-name="laypage" data-jump="">
<a href="javascript:void(0);" lay-href="component/laypage/">
分页
</a>
</dd>
<dd data-name="upload" data-jump="">
<a href="javascript:void(0);" lay-href="component/upload/">
上传
</a>
</dd>
<dd data-name="carousel" data-jump="">
<a href="javascript:;" lay-href="component/carousel/">
轮播
</a>
</dd>
<dd data-name="laytpl" data-jump="">
<a href="javascript:void(0);" lay-href="component/laytpl/">
模板引擎
</a>
</dd>
<dd data-name="flow" data-jump="">
<a href="javascript:void(0);" lay-href="component/flow/">
流加载
</a>
</dd>
<dd data-name="util" data-jump="">
<a href="javascript:;" lay-href="component/util/">
工具
</a>
</dd>
<dd data-name="code" data-jump="">
<a href="javascript:void(0);" lay-href="component/code/">
代码修饰
</a>
</dd>
<dd data-name="layim" data-jump="senior/im/">
<a href="javascript:void(0);" lay-href="senior/im/">
即时聊天
</a>
</dd>
</dl>
</li>
<li data-name="template" data-jump="" class="layui-nav-item ">
<a href="javascript:void(0);" lay-tips="模板" lay-direction="2">
<i class="layui-icon layui-icon-template">
</i>
<cite>
模板
</cite>
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="user" data-jump="">
<a href="javascript:void(0);">
用户相关
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="reg" data-jump="user/reg">
<a href="javascript:;" lay-href="user/reg">
注册
</a>
</dd>
<dd data-name="login" data-jump="user/login">
<a href="javascript:void(0);" lay-href="user/login">
登入
</a>
</dd>
<dd data-name="forget" data-jump="user/forget">
<a href="javascript:;" lay-href="user/forget">
忘记密码
</a>
</dd>
</dl>
</dd>
<dd data-name="tips" data-jump="">
<a href="javascript:void(0);">
提示页面
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="404" data-jump="">
<a href="javascript:void(0);" lay-href="template/tips/404">
404
</a>
</dd>
<dd data-name="error" data-jump="">
<a href="javascript:void(0);" lay-href="template/tips/error">
错误提示
</a>
</dd>
</dl>
</dd>
<dd data-name="" data-jump="">
<a href="javascript:;">
内嵌页面
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="" data-jump="/iframe/link/baidu">
<a href="javascript:void(0);" lay-href="/iframe/link/baidu">
百度一下
</a>
</dd>
<dd data-name="" data-jump="/iframe/link/layui">
<a href="javascript:void(0);" lay-href="/iframe/link/layui">
layui官网
</a>
</dd>
<dd data-name="" data-jump="/iframe/link/layuiAdmin">
<a href="javascript:void(0);" lay-href="/iframe/link/layuiAdmin">
layuiAdmin官网
</a>
</dd>
</dl>
</dd>
</dl>
</li>
<li data-name="app" data-jump="" class="layui-nav-item ">
<a href="javascript:void(0);" lay-tips="应用" lay-direction="2">
<i class="layui-icon layui-icon-app">
</i>
<cite>
应用
</cite>
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="message" data-jump="">
<a href="javascript:void(0);" lay-href="app/message/">
消息中心
</a>
</dd>
</dl>
</li>
<li data-name="senior" data-jump="" class="layui-nav-item ">
<a href="javascript:void(0);" lay-tips="高级" lay-direction="2">
<i class="layui-icon layui-icon-senior">
</i>
<cite>
高级
</cite>
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="im" data-jump="">
<a href="javascript:void(0);" lay-href="senior/im/">
通讯系统
</a>
</dd>
</dl>
</li>
<li data-name="user" data-jump="" class="layui-nav-item ">
<a href="javascript:void(0);" lay-tips="用户" lay-direction="2">
<i class="layui-icon layui-icon-user">
</i>
<cite>
用户
</cite>
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="user" data-jump="">
<a href="javascript:void(0);">
用户
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="list" data-jump="">
<a href="javascript:void(0);" lay-href="user/user/list">
用户列表
</a>
</dd>
</dl>
</dd>
<dd data-name="administrators" data-jump="">
<a href="javascript:void(0);">
后台管理组
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="list" data-jump="">
<a href="javascript:void(0);" lay-href="user/administrators/list">
管理员列表
</a>
</dd>
<dd data-name="role" data-jump="">
<a href="javascript:void(0);" lay-href="user/administrators/role">
角色管理
</a>
</dd>
</dl>
</dd>
</dl>
</li>
<li data-name="set" data-jump="" class="layui-nav-item ">
<a href="javascript:;" lay-tips="设置" lay-direction="2">
<i class="layui-icon layui-icon-set">
</i>
<cite>
设置
</cite>
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="base" data-jump="">
<a href="javascript:void(0);">
基本设置
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child">
<dd data-name="website" data-jump="">
<a href="javascript:;" lay-href="set/base/website">
系统设置
</a>
</dd>
<dd data-name="email" data-jump="">
<a href="javascript:void(0);" lay-href="set/base/email">
邮件服务
</a>
</dd>
</dl>
</dd>
<dd data-name="security" data-jump="">
<a href="javascript:void(0);" lay-href="set/security/">
安全设置
</a>
</dd>
</dl>
</li>
<li data-name="get" data-jump="system/get" class="layui-nav-item ">
<a href="javascript:void(0);" lay-href="system/get" lay-tips="授权" lay-direction="2">
<i class="layui-icon layui-icon-auz">
</i>
<cite>
授权
</cite>
</a>
</li>
<span class="layui-nav-bar">
</span>
</ul>
</div>
</div>
<div class="layadmin-pagetabs" id="tabs">
<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage">
</div>
<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage">
</div>
<div class="layui-icon layadmin-tabs-control layui-icon-down">
<ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
<li class="layui-nav-item" lay-unselect="">
<a href="javascript:void(0);">
<span class="layui-nav-more">
</span>
</a>
<dl class="layui-nav-child layui-anim-fadein">
<dd layadmin-event="closeThisTabs">
<a href="javascript:void(0);">
关闭当前标签页
</a>
</dd>
<dd layadmin-event="closeOtherTabs">
<a href="javascript:void(0);">
关闭其它标签页
</a>
</dd>
<dd layadmin-event="closeAllTabs">
<a href="javascript:void(0);">
关闭全部标签页
</a>
</dd>
</dl>
</li>
<span class="layui-nav-bar">
</span>
</ul>
</div>
<div class="layui-tab" lay-unauto="" lay-allowclose="true" lay-filter="layadmin-layout-tabs">
<ul class="layui-tab-title" id="LAY_app_tabsheader">
<li lay-id="/" class="layui-this">
<i class="layui-icon layui-icon-home">
</i>
<i class="layui-icon layui-unselect layui-tab-close">
ဆ
</i>
</li>
</ul>
</div>
</div>
</div>
#tabs {
background-color: rgba(0, 0, 0, 0.1);
}