JSP菜单系统实现-优快云博客

jsp文件

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="GBK"%>
<%@ taglib uri="/WEB-INF/taglib.tld" prefix="SysManager" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String UserAlias = (String )session.getAttribute("UserAlias"); //得到登陆用户名
String GroupID = (String)session.getAttribute("GroupID");
if (UserAlias == null || UserAlias.equals("null")|| GroupID == null || GroupID.equals("null")) {
   response.sendRedirect("/");
   return;
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>主菜单</title>

<style type="text/css">
body{font-family:tahoma,"宋体";background:#9DACBF;margin:0}
#main { width:170px;float:left;background:#9DACBF}

a{color:#FFFFFF; text-decoration:none}
a:hover{color:#324456;}

.title { width:170px;height:20px;font-size:14px;font-weight:bold;color:#fff;padding:4px 0 0 30px;background:#899BB1;border-bottom:1px #fff solid}
.info { width:150px;height:20px;font-size:12px;color:#fff;padding:3px 0 0 10px;}

.submain { width:170px;height:20px;font-size:14px;font-weight:bold;color:#fff;padding:4px 0 0 30px;background:#899BB1 url(/img/jt.gif) no-repeat 10px 7px;border-bottom:1px #fff solid}
.submain_class { width:150px;height:20px;font-size:14px;font-weight:bold;color:#fff;padding:3px 0 0 50px;background:url(/img/jt1.gif) no-repeat 33px 8px;border-bottom:1px #5C7D9E solid}
.submain_class_list { width:127px;height:20px;font-size:12px;/*font-weight:bold;*/color:#fff;padding:3px 0 0 73px;background:url(/img/jt1.gif) no-repeat 55px 8px;border-bottom:1px #5C7D9E solid}

.submain_class__sub_list { width:127px;height:20px;font-size:12px;/*font-weight:bold;*/color:#fff;padding:3px 0 0 93px;background:url(/img/jt1.gif) no-repeat 75px 8px;border-bottom:1px #5C7D9E solid}

</style>

<script src="/js/jquery.js" type="text/javascript"></script>

<script>

   $(document).ready(function(){

       //一级
       $(".firstMenu").toggle(
       function(){
           $(this).find(".secondMenu").css("display","block");
       },

       function(){
           $(this).find(".secondMenu").css("display","none");
       });


       //二级
       $(".secondMenu").toggle(
       function(){
           $(this).find(".thirdMenu").css("display","block");
       },

       function(){
           $(this).find(".thirdMenu").css("display","none");
       });


       //三
       $(".thirdMenu").toggle(
       function(){
           $(this).find(".fourthMenu").css("display","block");
       },

       function(){
           $(this).find(".fourthMenu").css("display","none");
       });


       //四级
       $(".fourthMenu").toggle(
       function(){
           $(this).find(".fourthMenu").css("display","block");
       },

       function(){
           $(this).find(".fourthMenu").css("display","none");
       });





   });

   //菜单跳转
   function goPage(url){
       //document.forms.goForm.action=url;
       //document.forms.goForm.submit();
       //location.replace(url);

       top.mainFrame.location.href=url;
   }

</script>

</head>

<body>
<form id="goForm" name="goForm" target="mainFrame"></form>

<div id="main">

   <c:forEach items="${listFirstMenu}" var="firstMenu">
       <div class="firstMenu" >
           <div class="submain">
               <c:if test="${firstMenu.url!=null && firstMenu.url!=''}">
                   <a href="#" onclick="goPage('${firstMenu.url}');" >${firstMenu.menuName}</a>
               </c:if>

               <c:if test="${firstMenu.url==null || firstMenu.url==''}">
                   <a href="#">${firstMenu.menuName}</a>
               </c:if>

           </div>

           <c:forEach items="${firstMenu.childMenu}" var="secondMenu">
               <div class="secondMenu" style="display:none;">
                   <div class="submain_class" >
                       <c:if test="${secondMenu.url!=null && secondMenu.url!=''}">
                           <a href="#" onclick="goPage('${secondMenu.url}');" >${secondMenu.menuName}</a>
                       </c:if>

                       <c:if test="${secondMenu.url==null || secondMenu.url==''}">
                           <a href="#">${secondMenu.menuName}</a>
                       </c:if>

                   </div>

                   <c:forEach items="${secondMenu.childMenu}" var="thirdMenu">
                       <div class="thirdMenu" style="display:none;">
                           <div class="submain_class_list" >

                               <c:if test="${thirdMenu.url!=null && thirdMenu.url!=''}">
                                   <a href="#" onclick="goPage('${thirdMenu.url}');" >${thirdMenu.menuName}</a>

                               </c:if>

                               <c:if test="${thirdMenu.url==null || thirdMenu.url==''}">
                                   <a href="#">${thirdMenu.menuName}</a>
                               </c:if>

                           </div>

                           <c:forEach items="${thirdMenu.childMenu}" var="fourthMenu">
                               <div class="fourthMenu" style="display:none;">
                                   <div class="submain_class__sub_list" >
                                       <c:if test="${fourthMenu.url!=null && fourthMenu.url!=''}">
                                           <a href="#" onclick="goPage('${fourthMenu.url}');" >${fourthMenu.menuName}</a>

                                       </c:if>

                                       <c:if test="${fourthMenu.url==null || fourthMenu.url==''}">
                                           <a href="#">${fourthMenu.menuName}</a>
                                       </c:if>
                                   </div>
                               </div>

                           </c:forEach>

                       </div>
                   </c:forEach>
               </div>
           </c:forEach>

       </div>

   </c:forEach>

   <div class="title"><a href="/logout" target="_top">退出系统</a></div>

</div>

</body>
</html>

动态四层菜单