使用layUI 创建菜单增加设计点击效果 + JSP引用

最新推荐文章于 2024-04-27 01:00:51 发布

半糖~

最新推荐文章于 2024-04-27 01:00:51 发布

阅读量297

点赞数

文章标签： layui

本文链接：https://blog.csdn.net/weixin_45304613/article/details/110394903

版权

创建菜单页，里面可以放一些通用的css、js一并引用

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;
charset=UTF-8"%> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt"
uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link href="/webjars/bootstrap/3.3.6/dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
.layui-body {
	position: absolute;
	top: 30px;
}
.add-edit {
	position: absolute;
	top: 80px;
}
/** 表单验证 样式布局 **/
.is-required:before {
	content: '* ';
	color: red;
}
</style>
</head>

<body>
	<ul class="layui-nav layui-nav-tree layui-nav-side">
		<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
		<li class="layui-nav-item layui-nav-itemed"><a
			href="javascript:;">资产管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/asset/type/show">资产分类</a>
				</dd>
				<dd>
					<a href="/asset/message/show">资产信息</a>
				</dd>
				<dd>
					<a href="/asset/usageLog/show">资产转移</a>
				</dd>
			</dl></li>
		<li class="layui-nav-item "><a href="javascript:;">学院管理</a>
			<dl class="layui-nav-child">
				<dd>
					<a href="/asset/campus/show">校区管理</a>
				</dd>
				<dd>
					<a href="">教室管理</a>
				</dd>
			</dl></li>
	</ul>
	<script src="/layui/layui.all.js"></script>
	<script type="text/javascript"
		src="/webjars/jquery/2.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="/js/common.js"></script>
	<script type="text/javascript">
		/**
		 *获取url
		 */
		function GetUrlRelativePath() {
			var url = document.location.toString();
			var arrUrl = url.split("//");

			var start = arrUrl[1].indexOf("/");
			var relUrl = arrUrl[1].substring(start);// stop省略，截取从start开始到结尾的所有字符

			if (relUrl.indexOf("?") != -1) {
				relUrl = relUrl.split("?")[0];
			}
			return relUrl;
		}

		/**
		 * 选中菜单默认打开
		 * @returns
		 */
		$(document).ready(
				function() {
					var url = GetUrlRelativePath();
					var patt1 = new RegExp(url);
					$(document.body).find('a').each(
							function(i, obj) {
								var str = $(obj).attr('href');
								if (patt1.test(str)) {
									//添加选中效果
									$(obj).parent().addClass("layui-this");
									//将选中的顶级菜单展开
									$(obj).parent().parent().parent().addClass(
											"layui-nav-itemed");
									//将其他顶级菜单隐藏
									$(obj).parent().parent().parent()
											.siblings().removeClass(
													"layui-nav-itemed");
								}
							});
				});
	</script>
</body>
</html>

其他页面如 jsp

<jsp:include page="/view/menu.jsp" /> //导入菜单页的所有内容
<div class="layui-body">
//这里面写菜单栏右侧内容
</div>