css文件
/*******left页面css*******/ .container { width: 220px; height: 100%; margin: auto; position: absolute; } .leftsidebar_box { width: 220px; height: 100%; background-color: #f2f2f2; } .leftsidebar_box dt { background-color: #f9f9f9; color: #333; font-size: 14px; position: relative; line-height: 44px; cursor: pointer; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; padding-left: 40px; } .leftsidebar_box dd { display: none; position: relative; background-color: white; padding-left: 65px; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; } .leftsidebar_box dd a { color: #333; line-height: 42px; width: 100%; height: 100%; display: inline-block; cursor: pointer; } .leftsidebar_box dt img.icon1 { display: none; position: absolute; top: 10px; left: 10px; } .leftsidebar_box dt img.icon2 { position: absolute; top: 10px; left: 10px; } .leftsidebar_box dt img.icon3 { display: none; position: absolute; top: 20px; right: 12px; } .leftsidebar_box dt img.icon4 { position: absolute; top: 20px; right: 12px; } .leftsidebar_box dd img.icon5 { display: none; position: absolute; top: 0px; right: 0px; } .leftsidebar_box dd img.coin11 { display: none; position: absolute; top: 0px; left: 40px; } .leftsidebar_box dd img.coin22 { position: absolute; top: 0px; left: 40px; } .leftsidebar_box dl dd:last-child { padding-bottom: 10px; } .leftsidebar_box .line { background-color: #f9f9f9; color: #333; font-size: 14px; position: relative; line-height: 44px; cursor: pointer; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; padding-left: 40px } .leftsidebar_box .line img { position: absolute; top: 10px; left: 10px; } .leftsidebar_box .menu_chioce1 { color: #106ea9; } .leftsidebar_box .menu_chioce2 { color: #106ea9; }
页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页左侧导航</title> <link rel="stylesheet" type="text/css" href="../css/public.css" /> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/public.js"></script> <script th:inline="javascript"> //获取登陆对象 window.onload = function () { var admin_id = $("#id_admin").val(); $.ajax({ type: "post", url: "/admin/getAdminId", data: { admin_id: admin_id }, success: function (admin) { $("#value_admin").val(admin.admin_id); if (admin.admin_id !='1'){ //这里已经时进得来的,但是设置没用,应该是收到父标签的影响,不知道怎么改 $("#superadmin").removeAttr("style"); $("#superadmin").css("display","none"); } } }) } </script> <script type="text/javascript"> //功能函数 //获取管理员列表 function admin(a){ a.href="/admin/getAdmin" } //修改密码 function changePwd(a){ a.href="/admin/msg?admin_id="+$("#value_admin").val(); } //部门添加 function addDept(a){ a.href="/admin/deptmsg" } </script> <head></head> <body id="bg"> <!-- 左边节点 --> <div class="container"> <input type="hidden" value="admin" id="id_admin"/> <input type="hidden" id="value_admin"/> <div class="leftsidebar_box"> <a href="/user/main" target="mainFrame"><div class="line"> <img src="../img/coin01.png" /> 首页 </div></a> <!-- <dl class="system_log"> <dt><img class="icon1" src="../img/coin01.png" /><img class="icon2"src="../img/coin02.png" /> 首页<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /></dt> </dl> --> <dl > <dt> <img class="icon1" src="../img/coin03.png" /> <img class="icon2" src="../img/coin04.png" /> 系统管理员模块 <img class="icon3" src="../img/coin19.png" /> <img class="icon4" src="../img/coin20.png" /> </dt> <dd id="superadmin" > <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a class="cks" href="#" onclick="admin(this)" target="mainFrame">系统管理员管理</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a class="cks" href="#" onclick="changePwd(this)" target="mainFrame">修改密码</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coin05.png" /><img class="icon2" src="../img/coin06.png" /> 部门模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a class="cks" href="#" onclick="addDept(this)" target="mainFrame">部门信息添加</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a class="cks" href="../../templates/department_show.html" target="mainFrame">部门信息查询</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coin07.png" /><img class="icon2" src="../img/coin08.png" /> 员工模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/employee_add.html" target="mainFrame" class="cks">人事添加</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/employee_show.html" target="mainFrame" class="cks">人事查询</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coin10.png" /><img class="icon2" src="../img/coin09.png" /> 经理模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/manager_add.html" target="mainFrame" class="cks">经理添加</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/manager_show.html" target="mainFrame" class="cks">经理查询</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coin11.png" /><img class="icon2" src="../img/coin12.png" /> 考勤时间模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/attendancetime_add.html" target="mainFrame" class="cks">考勤时间添加</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/attendancetime_show.html" target="mainFrame" class="cks">考勤时间管理</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coin14.png" /><img class="icon2" src="../img/coin13.png" /> 考勤补录模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/attendance_add.html" target="mainFrame" class="cks">考勤补录管理</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coin15.png" /><img class="icon2" src="../img/coin16.png" /> 考勤记录模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/attendance_show.html" target="mainFrame" class="cks">考勤记录管理</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> <dl class="system_log"> <dt> <img class="icon1" src="../img/coinL1.png" /><img class="icon2" src="../img/coinL2.png" /> 请假模块<img class="icon3" src="../img/coin19.png" /><img class="icon4" src="../img/coin20.png" /> </dt> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/apply_sick.html" target="mainFrame" class="cks">病假统计</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/apply_person.html" target="mainFrame" class="cks">事假统计</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/apply_vacation.html" target="mainFrame" class="cks">休假统计</a><img class="icon5" src="../img/coin21.png" /> </dd> <dd> <img class="coin11" src="../img/coin111.png" /><img class="coin22" src="../img/coin222.png" /><a href="../../templates/apply_overtime.html" target="mainFrame" class="cks">加班统计</a><img class="icon5" src="../img/coin21.png" /> </dd> </dl> </div> </div> </body> </html>