動態生成二級導航菜單

原創 zhupengfei418 2019-02-22 21:15

 根據得到的json數據動態生成二級導航菜單

jsp:頁面

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
  2. <% 
  3. String path = request.getContextPath(); 
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
  5. %> 
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  8. <html> 
  9.   <head> 
  10.     <base href="<%=basePath%>"> 
  11.      
  12.     <title>My JSP 'testMent.jsp' starting page</title> 
  13.      
  14.     <meta http-equiv="pragma" content="no-cache"> 
  15.     <meta http-equiv="cache-control" content="no-cache"> 
  16.     <meta http-equiv="expires" content="0">     
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  18.     <meta http-equiv="description" content="This is my page"> 
  19.     <style> 
  20. *{ 
  21.     margin:0; 
  22.     padding:0; 
  23. } 
  24. .clear:after { 
  25.     clear: both; 
  26.     content: "."; 
  27.     display: block; 
  28.     height: 0; 
  29.     visibility: hidden; 
  30. } 
  31. nav{ 
  32.     display:inline-block; 
  33.     border:1px solid #505255; 
  34.     border-bottom: 1px solid #282C2F; 
  35.     -moz-border-radius: 5px; 
  36.     -webkit-border-radius: 5px; 
  37.     margin:50px; 
  38.     -webkit-box-shadow:1px 1px 3px #292929; 
  39.     -moz-box-shadow:1px 1px 3px #292929; 
  40. } 
  41. li{ 
  42.     list-style:none; 
  43.     float:left; 
  44.     border-right: 1px solid #2E3235; 
  45.     position: relative; 
  46.     /*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F  50%,#3E4245 100%); 
  47.     background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/ 
  48.     background:#555D5F; 
  49. } 
  50. li:hover{ 
  51.     /*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F  80%,#555D5F 100%); 
  52.     background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/ 
  53.     background:#3E4245; 
  54.     -moz-transition: background 1s ease-out; 
  55.     -webkit-transition: background 1s ease-out; 
  56. } 
  57. li a{ 
  58.     display:block; 
  59.     height:40px; 
  60.     line-height:40px; 
  61.     padding:0 30px; 
  62.     font-size:12px; 
  63.     color:#fff; 
  64.     text-shadow: 0px -1px 0px #000; 
  65.     text-decoration:none; 
  66.     white-space:nowrap; 
  67.     border-left: 1px solid #999E9F; 
  68.     border-top: 1px solid #999E9F; 
  69.     -moz-border-top-left-radius: 2px; 
  70.     -webkit-border-top-left-radius: 2px; 
  71.      
  72.     z-index:100; 
  73. } 
  74. li > a{ 
  75.     position:relative; 
  76. } 
  77. li.first a{ 
  78.     -moz-border-radius-topleft: 4px; 
  79.     -moz-border-radius-bottomleft: 4px; 
  80.     -webkit-border-top-left-radius: 4px; 
  81.     -webkit-border-bottom-left-radius: 4px; 
  82. } 
  83. li.last{ 
  84.     border-right: 0 none; 
  85. } 
  86.  
  87.  
  88. dl{ 
  89.     position:absolute; 
  90.     display:block; 
  91.     top:40px; 
  92.     left: -25px; 
  93.      
  94.     width:165px; 
  95.      
  96.     background:#222222; 
  97.     -moz-border-radius: 5px; 
  98.     -webkit-border-radius: 5px; 
  99.      
  100.     -webkit-box-shadow:1px 1px 3px #292929; 
  101.     -moz-box-shadow:1px 1px 3px #292929; 
  102.      
  103.     z-index:10; 
  104.              
  105. } 
  106. li:hover dl{ 
  107.     top:50px; 
  108.     display:block; 
  109.     width:145px; 
  110.     padding:10px; 
  111. } 
  112. dl a{ 
  113.     background:transparent; 
  114.     border:0 none; 
  115.     -moz-border-radius: 5px; 
  116.     -webkit-border-radius: 5px; 
  117.     -moz-transition: background 0.5s ease-out; 
  118.     -webkit-transition: background 0.5s ease-out; 
  119.      
  120.     z-index:50; 
  121. } 
  122. dl a:hover{ 
  123.     color:#FFF; 
  124.     background:#999E9F; 
  125.     -moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
  126.     -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
  127. } 
  128. dd{ 
  129.     margin-top:-40px; 
  130.     opacity:0; 
  131.     width:145px; 
  132.     -webkit-transition-property:all; 
  133.     /*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/ 
  134.     -moz-transition-property: all; 
  135.     /*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/ 
  136.     /*-webkit-transition-delay:5s; 
  137.     -moz-transition-delay:5s;*/ 
  138. } 
  139. li:hover dd{ 
  140.     margin-top:0; 
  141.     opacity:1; 
  142. } 
  143. li dd:nth-child(1){ 
  144.     -webkit-transition-duration: 0.1s; 
  145.     -moz-transition-duration: 0.1s; 
  146. } 
  147. li dd:nth-child(2){ 
  148.     -webkit-transition-duration: 0.2s; 
  149.     -moz-transition-duration: 0.2s; 
  150. } 
  151. li dd:nth-child(3){ 
  152.     -webkit-transition-duration: 0.3s; 
  153.     -moz-transition-duration: 0.3s; 
  154. } 
  155. li dd:nth-child(4){ 
  156.     -webkit-transition-duration: 0.4s; 
  157.     -moz-transition-duration: 0.4s; 
  158. } 
  159. dt{ 
  160.     display:none; 
  161.     margin-top:-25px; 
  162.     padding-top:15px; 
  163.     height:10px; 
  164. } 
  165. li:hover dt{ 
  166.     display:block; 
  167. } 
  168. .Darrow{ 
  169.     float:right; 
  170.     margin:18px 10px 0 0; 
  171.     border-width:5px; 
  172.     border-color:#FFF transparent transparent transparent; 
  173.     border-style:solid; 
  174.     width:0; 
  175.     height:0; 
  176.     line-height:0; 
  177.     overflow:hidden; 
  178.      
  179.     cursor:pointer; 
  180.      
  181.     text-shadow: 0px -1px 0px #000; 
  182.      
  183.     -webkit-box-shadow:0px -1px 0px #000; 
  184.     -moz-box-shadow:0px -1px 0px #000; 
  185. } 
  186. .arrow{ 
  187.     margin:0 auto; 
  188.     margin-top:-5px; 
  189.     display:block; 
  190.     width:10px; 
  191.     height:10px; 
  192.     background:#222222; 
  193.     -webkit-transform: rotate(45deg); 
  194.     -moz-transform: rotate(45deg); 
  195. } 
  196. </style> 
  197.     <script type="text/javascript" src="javascript/jquery.min.js"></script> 
  198.     <script type="text/javascript"> 
  199.     function test(){ 
  200.      var s=''; 
  201.        $.ajax({ 
  202.         type:'get',//請求方式 
  203.         url:'json.json', // AJAX HTTP請求接口 'json.json'
  204.         data:'', 
  205.         dataType:'json',//請求類型爲json 
  206.         timeout:7000,//請求超時後停止請求 
  207.         success: function(json){ 
  208.          var d=json; 
  209.            
  210.            $.each(d,function(i){ 
  211.             
  212.               if(typeof d[i].children != "undefined" && d[i].children.length >0) 
  213.                 { 
  214.                 s+= '<li><span class="Darrow"></span><a href="#">'+d[i].text+'</a><dl><dt><span class="arrow"></span></dt>'; 
  215.                 $.each(d[i].children,function(j){ 
  216.                 s+=' <dd><a href="#">'+d[i].children[j].text+'</a></dd>'; 
  217.                 }); 
  218.                 s+='</dl></li>'; 
  219.                  
  220.                 } 
  221.                 else 
  222.                 { 
  223.                     s+='<li class="first"><a href="#">'+d[i].text+'</a></li>'; 
  224.                 } 
  225.                  
  226.             });           
  227.              $('#out').html(s); 
  228.     } 
  229.     }); 
  230.  
  231.     } 
  232.      
  233.     </script> 
  234.  
  235.   </head> 
  236.    
  237.   <body> 
  238.     <input type="button" onclick="test()" value="點擊生成菜單"> 
  239.    
  240.  <nav> 
  241.     <ul class="clear" id="out"> 
  242.          
  243.     </ul> 
  244. </nav> 
  245.   </body> 
  246. </html> 

json數據頁面:

 

  1. [ 
  2. {"id":"90","text":"menu1","children":[{"id":"9010","text":"chidren1","children":[],"leaf":true,"iconCls":"menu-11","url":"jsp/sysManger/role.jsp"},{"id":"9020","text":"chidren2","children":[],"leaf":true,"iconCls":"menu-12","url":"jsp/sysManger/user.jsp"},{"id":"9030","text":"chidren3","children":[],"leaf":true,"iconCls":"menu-13","url":"jsp/sysManger/data.jsp"}],"leaf":false,"iconCls":"menu-1","url":null} 
  3. ,{"id":"90","text":"menu2","leaf":false,"iconCls":"menu-1","url":null} 
  4. ,{"id":"90","text":"menu3","children":[{"id":"9010","text":"chidren1","children":[],"leaf":true,"iconCls":"menu-11","url":"jsp/sysManger/role.jsp"},{"id":"9020","text":"chidren2","children":[],"leaf":true,"iconCls":"menu-12","url":"jsp/sysManger/user.jsp"},{"id":"9030","text":"chidren3","children":[],"leaf":true,"iconCls":"menu-13","url":"jsp/sysManger/data.jsp"}],"leaf":false,"iconCls":"menu-1","url":null} 
  5. ,{"id":"90","text":"menu4","children":[{"id":"9010","text":"chidren1","children":[],"leaf":true,"iconCls":"menu-11","url":"jsp/sysManger/role.jsp"},{"id":"9020","text":"chidren2","children":[],"leaf":true,"iconCls":"menu-12","url":"jsp/sysManger/user.jsp"},{"id":"9030","text":"chidren3","children":[],"leaf":true,"iconCls":"menu-13","url":"jsp/sysManger/data.jsp"}],"leaf":false,"iconCls":"menu-1","url":null} 
  6. ] 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Extjs 4.2 +Struts2 實現數據動態加載

kefly 2019-02-23 13:20:48

轉：如何用GCC編譯生成動態鏈接庫*.SO文件 動態庫

lazymorning 2019-02-23 12:58:42

指針與鏈表的理解

計科150809212 2019-02-23 12:53:25

Oracle Listener 動態註冊 與 靜態註冊

xinxinghe 2019-02-23 00:38:51

Oracle Listener 動態註冊 與 靜態註冊

xinxinghe 2019-02-23 00:38:45

JDK動態代理

wutong_2018 2019-02-23 00:36:41

動態順序表

xupresent 2019-02-23 00:33:44

單獨編譯apache的rewrite模塊

腿毛的憂傷 2019-02-23 00:33:40

動態路由協議eigrp和mpls的配置

曼尼 2019-02-23 00:31:38

大型企業網絡構建之動態NAT、靜態NAT和華爲NAT

繁星o春水 2019-02-23 00:22:09

Apache與Nginx的優缺點比較

lonelyC 2019-02-23 00:16:06

淺析：Pulltorefresh使用中碰到的問題

鏡中小白 2019-02-23 00:15:37

當前標籤dede[field:**]標籤調用說明

410502505 2019-02-23 13:09:08

（JQuery學習筆記）利用jquery製作網頁導航定位

w1sw 2019-02-23 00:33:03

ios7 中關於導航切換影響UIScrollView的問題

dragon_cao 2019-02-23 00:11:51