时间轴样式的侧导航菜单代码实例

时间:2021-11-25
类别:教程 - 网页设计

最终效果图如下:

时间轴样式的侧边导航菜单

HTML代码(index.html):

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>index</title> 
  6.     <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"
  7.     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"
  8.     <link rel="stylesheet" href="css/style.css"
  9. </head> 
  10.  
  11. <body> 
  12.  
  13. <!-- 左侧导航 --> 
  14. <div class="contentLeft"
  15.     <div id="sidebar-menu" class="main_menu_side hidden-print main_menu"
  16.         <ul class="nav side-menu" id="navmenu"></ul> 
  17.     </div> 
  18. </div> 
  19. <!-- 右侧内容 --> 
  20. <div class="contentRight"
  21.     <div class="right_col" role="main" id="rightContent"></div> 
  22. </div> 
  23.  
  24. <script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script> 
  25. <script src='https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js'></script> 
  26. <script src='js/script.js'></script> 
  27. </body> 
  28. </html> 

CSS样式代码(style.css):

  1. a, 
  2. a:focus, 
  3. a:hover { 
  4.   text-decoration: none 
  5.  
  6. .main_menu .fa { 
  7.   -webkit-font-smoothing: antialiased; 
  8.   width: 24px; 
  9.   opacity: .99; 
  10.   display: inline-block; 
  11.   font-family: FontAwesome; 
  12.   font-style: normal; 
  13.   font-weight: 400; 
  14.   font-size: 18px; 
  15.  
  16. .main_menu span.fa { 
  17.   float: right; 
  18.   text-align: center; 
  19.   margin-top: 5px; 
  20.   font-size: 10px; 
  21.   min-width: inherit; 
  22.   color: #C4CFDA 
  23.  
  24. .active a span.fa { 
  25.   text-align: right!important; 
  26.   margin-right: 4px 
  27.  
  28. .nav.side-menu>li { 
  29.   position: relative; 
  30.   display: block; 
  31.   cursor: pointer 
  32.  
  33. .nav.side-menu>li>a { 
  34.   margin-bottom: 6px 
  35.  
  36. .nav.side-menu>li>a:hover { 
  37.   color: #F2F5F7!important 
  38.  
  39. .nav.side-menu>li>a:hover, 
  40. .nav>li>a:focus { 
  41.   text-decoration: none; 
  42.   background: 0 0 
  43.  
  44. .nav.child_menu { 
  45.   display: none 
  46.  
  47. .nav.child_menu li.active, 
  48. .nav.child_menu li:hover { 
  49.   background-color: rgba(255, 255, 255, .06) 
  50.  
  51. .nav.child_menu li { 
  52.   padding-left: 36px 
  53.  
  54. ul.nav.child_menu li:before { 
  55.   background: #425668; 
  56.   bottom: auto; 
  57.   content: ""
  58.   height: 8px; 
  59.   left: 23px; 
  60.   margin-top: 15px; 
  61.   position: absolute; 
  62.   right: auto; 
  63.   width: 8px; 
  64.   z-index: 1; 
  65.   border-radius: 50% 
  66.  
  67. ul.nav.child_menu li:after { 
  68.   border-left: 1px solid #425668; 
  69.   bottom: 0; 
  70.   content: ""
  71.   left: 27px; 
  72.   position: absolute; 
  73.   top: 0 
  74.  
  75. .nav>li>a { 
  76.   position: relative; 
  77.   display: block 
  78.  
  79. .nav.child_menu>li>a, 
  80. .nav.side-menu>li>a { 
  81.   color: #E7E7E7; 
  82.   font-weight: 500 
  83.  
  84. .nav li li.current-page a, 
  85. .nav.child_menu li li a.active, 
  86. .nav.child_menu li li a:hover { 
  87.   color: #fff 
  88.  
  89. .nav.child_menu li li.active, 
  90. .nav.child_menu li li:hover { 
  91.   background: 0 0 
  92.  
  93. .nav>li>a { 
  94.   padding: 13px 15px 12px 
  95.  
  96. .nav.side-menu>li.active, 
  97. .nav.side-menu>li.current-page { 
  98.   border-right: 5px solid #1ABB9C 
  99.  
  100. .nav li.current-page { 
  101.   background: rgba(255, 255, 255, .05) 
  102.  
  103. .nav li li li.current-page { 
  104.   background: 0 0 
  105.  
  106. .nav.side-menu>li.active>a { 
  107.   text-shadow: rgba(0, 0, 0, .25) 0 -1px 0; 
  108.   background: linear-gradient(#334556, #2C4257), #2A3F54; 
  109.   box-shadow: rgba(0, 0, 0, .25) 0 1px 0, inset rgba(255, 255, 255, .16) 0 1px 0 
  110.  
  111. .nav>li>a:focus, 
  112. .nav>li>a:hover { 
  113.   background-color: transparent 
  114.  
  115. *{ 
  116.   padding: 0;margin: 0; 
  117.  
  118. body,html{ 
  119.   width: 100%; 
  120.   height: 100%; 
  121.  
  122. .contentLeft { 
  123.   float: left; 
  124.   width: 15%; 
  125.   height: 100%; 
  126.   background:black; 
  127.   opacity: 0.7; 
  128.  
  129. .contentRight { 
  130.   float: left; 
  131.   width: 85%; 

JS代码(script.js):

  1. $(function() { 
  2.     $.ajax({ 
  3.         type: "get"
  4.         url: '/demo/json/data.json'
  5.         dataType: "json"
  6.         success: function(result) { 
  7.             var res = eval(result.data); 
  8.             showSideMenu(res); 
  9.         } 
  10.     }); 
  11.     $("#navmenu").on("click"".liname"
  12.     function(index) { 
  13.         var index = $("#navmenu .liname").index(this); 
  14.         $("#navmenu>li>.child_menu").eq(index).slideToggle(); 
  15.         $("#navmenu>li>.child_menu").eq(index).parent().siblings("li").find(".child_menu").slideUp(); 
  16.     }); 
  17. }); 
  18. function showSideMenu(res) { 
  19.     for (var i = 0; i < res.length; i++) { 
  20.         var html = ""
  21.         html += "<li>"
  22.         html += "<a class='liname'><i class='fa fa-home'></i>" + res[i].menuName + "<span class='fa fa-chevron-down'></span></a>"
  23.         html += "<ul class='nav child_menu'>"
  24.         for (var k = 0; k < res[i].children.length; k++) { 
  25.             if (typeof(res[i].children[k].children) != 'undefined') { 
  26.                 html += "<li class='three_menu'>"
  27.                 html += "<a href='" + res[i].children[k].menuAction + "'>" + res[i].children[k].menuName + "</a>"
  28.                 html += "<ul class='nav child_menu'>"
  29.                 for (var j = 0; j < res[i].children[k].children.length; j++) { 
  30.                     html += "<li>"
  31.                     html += "<a href='" + res[i].children[k].children[j].menuAction + "' target='myFrame' >" + res[i].children[k].children[j].menuName + "</a>"
  32.                     html += "</li>"
  33.                 } 
  34.                 html += "</ul>"
  35.                 html += "</li>"
  36.             } else if (typeof(res[i].children[k].children) == 'undefined') { 
  37.                 html += "<li>"
  38.                 html += "<a href='" + res[i].children[k].menuAction + "' target='myFrame'>" + res[i].children[k].menuName + "</a>"
  39.                 html += "</li>"
  40.             } 
  41.         } 
  42.         html += "</ul>"
  43.         html += "</li>"
  44.         $("#navmenu").append(html); 
  45.     }; 
  46.     $("#navmenu .child_menu").eq(0).css({ 
  47.         "display""block" 
  48.     }); 
  49.     $("#navmenu .child_menu").eq(0).find("li:eq(0)").addClass("current-page"); 
  50.     var fram = "<iframe src='https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg' name='myFrame' id='myIframe' width='100%' height='100%'  scrolling='auto' frameborder='0'></iframe>"
  51.     $("#rightContent").append(fram); 
  52.     $("#navmenu .child_menu").on("click""li"
  53.     function() { 
  54.         var index = $("#navmenu .child_menu li").index(this); 
  55.         $("#navmenu .child_menu li").eq(index).parent().parent().siblings("li").find(".child_menu").slideUp(); 
  56.         $("#navmenu .child_menu li").eq(index).parent().parent().siblings("li").find(".child_menu").find("li").removeClass("current-page"); 
  57.         $("#navmenu .child_menu li").eq(index).addClass("current-page"); 
  58.         $("#navmenu .child_menu li").eq(index).siblings().removeClass("current-page"); 
  59.     }); 
  60.     $("#navmenu").on("click"".three_menu"
  61.     function() { 
  62.         var index = $("#navmenu .three_menu").index(this); 
  63.         $("#navmenu .three_menu .child_menu").eq(index).slideDown(); 
  64.     }); 
  65.     $("#navmenu .three_menu").on("click""li"
  66.     function() { 
  67.         var index = $("#navmenu .three_menu li").index(this); 
  68.         $("#navmenu .three_menu li a").eq(index).css({ 
  69.             "color""beige" 
  70.         }); 
  71.         $("#navmenu .three_menu li a").eq(index).parent().siblings("li").find("a").css({ 
  72.             "color""white" 
  73.         }); 
  74.     }); 
  75.     var str = window.screen.availHeight - 170; 
  76.     $("#rightContent").css({ 
  77.         "min-height": str 
  78.     }); 
  79.     var bdHeight = document.documentElement.clientHeight; 
  80.     $("#rightContent").height(bdHeight - 65); 

JSON代码(data.json):

 
  1.     "data": [ 
  2.         { 
  3.             "menuId""01"
  4.             "menuName""基础信息管理"
  5.             "menuCode""RR1234"
  6.             "menuAction""#"
  7.             "children": [ 
  8.                 { 
  9.                     "menuId""001"
  10.                     "menuName""岗位管理"
  11.                     "menuCode""RR1234"
  12.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  13.                 }, { 
  14.                     "menuId""001"
  15.                     "menuName""证书类型"
  16.                     "menuCode""RR1234"
  17.                     "menuAction""https://fanyi.baidu.com/?aldtype=16047#auto/zh" 
  18.                 }, { 
  19.                     "menuId""001"
  20.                     "menuName""岗位证书"
  21.                     "menuCode""RR1234"
  22.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  23.                 }, { 
  24.                     "menuId""001"
  25.                     "menuName""考勤类型"
  26.                     "menuCode""Yggdcd"
  27.                     "menuAction""https://fanyi.baidu.com/?aldtype=16047#auto/zh" 
  28.                 }, { 
  29.                     "menuId""001"
  30.                     "menuName""技能等级"
  31.                     "menuCode""RR1234"
  32.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  33.                 } 
  34.             ] 
  35.         }, { 
  36.             "menuId""01"
  37.             "menuName""考勤管理"
  38.             "menuCode""RR1234"
  39.             "menuAction""#"
  40.             "children": [ 
  41.                 { 
  42.                     "menuId""001"
  43.                     "menuName""考勤录入"
  44.                     "menuCode""RR1234"
  45.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  46.                 }, { 
  47.                     "menuId""001"
  48.                     "menuName""考勤审批"
  49.                     "menuCode""RR1234"
  50.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  51.                 }, { 
  52.                     "menuId""001"
  53.                     "menuName""考勤查看"
  54.                     "menuCode""RR1234"
  55.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  56.                 } 
  57.             ] 
  58.         }, { 
  59.             "menuId""01"
  60.             "menuName""证书管理"
  61.             "menuCode""RR1234"
  62.             "menuAction""#"
  63.             "children": [ 
  64.                 { 
  65.                     "menuId""001"
  66.                     "menuName""人员证书"
  67.                     "menuCode""RR1234"
  68.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  69.                 }, { 
  70.                     "menuId""001"
  71.                     "menuName""到期证书"
  72.                     "menuCode""RR1234"
  73.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  74.                 }, { 
  75.                     "menuId""001"
  76.                     "menuName""缺失证书"
  77.                     "menuCode""RR1234"
  78.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  79.                 }, { 
  80.                     "menuId""001"
  81.                     "menuName""证书统计"
  82.                     "menuCode""RR1234"
  83.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  84.                 } 
  85.             ] 
  86.         }, { 
  87.             "menuId""01"
  88.             "menuName""证书统计"
  89.             "menuCode""RR1234"
  90.             "menuAction""#"
  91.             "children": [ 
  92.                 { 
  93.                     "menuId""001"
  94.                     "menuName""员工证书统计"
  95.                     "menuCode""RR1234"
  96.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  97.                 }, { 
  98.                     "menuId""001"
  99.                     "menuName""单位各证书情况"
  100.                     "menuCode""RR1234"
  101.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  102.                 } 
  103.             ] 
  104.         },  { 
  105.             "menuId""01"
  106.             "menuName""系统管理"
  107.             "menuCode""RR1234"
  108.             "menuAction""#"
  109.             "children": [ 
  110.                 { 
  111.                     "menuId""001"
  112.                     "menuName""机构管理"
  113.                     "menuCode""RR1234"
  114.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  115.                 }, { 
  116.                     "menuId""001"
  117.                     "menuName""菜单管理"
  118.                     "menuCode""RR1234"
  119.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  120.                 }, { 
  121.                     "menuId""001"
  122.                     "menuName""角色管理"
  123.                     "menuCode""RR1234"
  124.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  125.                 }, { 
  126.                     "menuId""001"
  127.                     "menuName""用户管理"
  128.                     "menuCode""RR1234"
  129.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  130.                 }, { 
  131.                     "menuId""001"
  132.                     "menuName""角色菜单"
  133.                     "menuCode""RR1234"
  134.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  135.                 }, { 
  136.                     "menuId""001"
  137.                     "menuName""角色人员"
  138.                     "menuCode""RR1234"
  139.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  140.                 }, { 
  141.                     "menuId""001"
  142.                     "menuName""人员管理"
  143.                     "menuCode""RR1234"
  144.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  145.                 } 
  146.             ] 
  147.         },{ 
  148.             "menuId""01"
  149.             "menuName""人员动态管理"
  150.             "menuCode""RR1234"
  151.             "menuAction""#"
  152.             "children": [ 
  153.                 { 
  154.                     "menuId""001"
  155.                     "menuName""人员异动汇总"
  156.                     "menuCode""RR1234"
  157.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  158.                 }, { 
  159.                     "menuId""001"
  160.                     "menuName""人员调整(发起)"
  161.                     "menuCode""RR1234"
  162.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  163.                 }, { 
  164.                     "menuId""001"
  165.                     "menuName""人员调整(审批)"
  166.                     "menuCode""RR1234"
  167.                     "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  168.                 }, { 
  169.                     "menuId""001"
  170.                     "menuName""人员技能"
  171.                     "menuCode""RR1234"
  172.                     "menuAction""#"
  173.                     "children": [ 
  174.                         { 
  175.                             "menuId""001"
  176.                             "menuName""岗位信息"
  177.                             "menuCode""RR1234"
  178.                             "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  179.                         },{ 
  180.                             "menuId""001"
  181.                             "menuName""学历信息"
  182.                             "menuCode""RR1234"
  183.                             "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  184.                         },{ 
  185.                             "menuId""001"
  186.                             "menuName""身份信息"
  187.                             "menuCode""RR1234"
  188.                             "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  189.                         },{ 
  190.                             "menuId""001"
  191.                             "menuName""现场测评"
  192.                             "menuCode""RR1234"
  193.                             "menuAction""https://www.uu2018.com/uploads/allimg/200618/1042442530-1.jpg" 
  194.                         } 
  195.                     ] 
  196.                 } 
  197.             ] 
  198.         } 
  199.     ] 

由于使用了ajax,所以记得要在服务器端运行。

    收藏