時间轴款式的侧导航栏莱单编码案例

摘要: 最后实际效果图以下:!DOCTYPE html html lang= en head meta charset= UTF-8 title index /title link rel= stylesheet href= libs/bootstrap/3.3.4/css/bootstrap.css link rel= stylesheet href= font-awesome/4.6.0/css/font-awe...

最后实际效果图以下:

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

<):

 !DOCTYPE html   html lang= en   head   meta charset= UTF-8   title index /title   link rel= stylesheet  href= libs/bootstrap/3.3.4/css/bootstrap.css   link rel= stylesheet  href= font-awesome/4.6.0/css/font-awesome.min.css   link rel= stylesheet  href= css/style.css   /head   body   !-- 左边导航栏 --   div  'jquery/1.10.2/jquery.min.js' /script   script src='libs/bootstrap/3.3.4/js/bootstrap.min.js' /script   script src='js/script.js' /script   /body   /html  

CSS款式编码(style.css):

a, a:focus, a:hover { text-decoration: none } .main_menu .fa { -webkit-font-smoothing: antialiased; width: 24px; opacity: .99; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; font-size: 18px; } .main_menu span.fa { float: right; text-align: center; margin-top: 5px; font-size: 10px; min-width: inherit; color: #C4CFDA } .active a span.fa { text-align: right!important; margin-right: 4px } .nav.side-menu li { position: relative; display: block; cursor: pointer } .nav.side-menu li a { margin-bottom: 6px } .nav.side-menu li a:hover { color: #F2F5F7!important } .nav.side-menu li a:hover, .nav li a:focus { text-decoration: none; background: 0 0 } .nav.child_menu { display: none } .nav.child_menu li.active, .nav.child_menu li:hover { background-color: rgba(255, 255, 255, .06) } .nav.child_menu li { padding-left: 36px } ul.nav.child_menu li:before { background: #425668; bottom: auto; content:  ; height: 8px; left: 23px; margin-top: 15px; position: absolute; right: auto; width: 8px; z-index: 1; border-radius: 50% } ul.nav.child_menu li:after { border-left: 1px solid #425668; bottom: 0; content:  ; left: 27px; position: absolute; top: 0 } .nav li a { position: relative; display: block } .nav.child_menu li a, .nav.side-menu li a { color: #E7E7E7; font-weight: 500 } .nav li li.current-page a, .nav.child_menu li li a.active, .nav.child_menu li li a:hover { color: #fff } .nav.child_menu li li.active, .nav.child_menu li li:hover { background: 0 0 } .nav li a { padding: 13px 15px 12px } .nav.side-menu li.active, .nav.side-menu li.current-page { border-right: 5px solid #1ABB9C } .nav li.current-page { background: rgba(255, 255, 255, .05) } .nav li li li.current-page { background: 0 0 } .nav.side-menu li.active a { text-shadow: rgba(0, 0, 0, .25) 0 -1px 0; background: linear-gradient(#334556, #2C4257), #2A3F54; box-shadow: rgba(0, 0, 0, .25) 0 1px 0, inset rgba(255, 255, 255, .16) 0 1px 0 } .nav li a:focus, .nav li a:hover { background-color: transparent } *{ padding: 0;margin: 0; } body,html{ width: 100%; height: 100%; } .contentLeft { float: left; width: 15%; height: 100%; background:black; opacity: 0.7; } .contentRight { float: left; width: 85%; } 

JS编码(script.js):

$(function() { $.ajax({ type:  get , url: '/demo/json/data.json', dataType:  json ,&ess: function(result) { var res = eval(result.data); showSideMenu(res); } }); $( #navmenu ).on( click ,  .liname , function(index) { var index = $( #navmenu .liname ).index(this); $( #navmenu li .child_menu ).eq(index).slideToggle(); $( #navmenu li .child_menu ).eq(index).parent().siblings( li ).find( .child_menu ).slideUp(); }); }); function showSideMenu(res) { for (var i = 0; i   res.length; i++) { var html =  ; html +=  li ; html +=  a  i  /i  + res[i].menuName +  span  /span /a ; html +=  ul  ; for (var k = 0; k   res[i].children.length; k++) { if (typeof(res[i].children[k].children) != 'undefined') { html +=  li  ; html +=  a href='  + res[i].children[k].menuAction +  '  + res[i].children[k].menuName +  /a ; html +=  ul  ; for (var j = 0; j   res[i].children[k].children.length; j++) { html +=  li ; html +=  a href='  + res[i].children[k].children[j].menuAction +  ' target='myFrame'   + res[i].children[k].children[j].menuName +  /a ; html +=  /li ; } html +=  /ul ; html +=  /li ; } else if (typeof(res[i].children[k].children) == 'undefined') { html +=  li ; html +=  a href='  + res[i].children[k].menuAction +  ' target='myFrame'  + res[i].children[k].menuName +  /a ; html +=  /li ; } } html +=  /ul ; html +=  /li ; $( #navmenu ).append(html); }; $( #navmenu .child_menu ).eq(0).css({  display :  block  }); $( #navmenu .child_menu ).eq(0).find( li:eq(0) ).addClass( current-page ); var fram =  iframe src='/uploads/allimg/20530-1.jpg' name='myFrame' id='myIframe' width='100%' height='100%' scrolling='auto' frameborder='0' /iframe ; $( #rightContent ).append(fram); $( #navmenu .child_menu ).on( click ,  li , function() { var index = $( #navmenu .child_menu li ).index(this); $( #navmenu .child_menu li ).eq(index).parent().parent().siblings( li ).find( .child_menu ).slideUp(); $( #navmenu .child_menu li ).eq(index).parent().parent().siblings( li ).find( .child_menu ).find( li ).removeClass( current-page ); $( #navmenu .child_menu li ).eq(index).addClass( current-page ); $( #navmenu .child_menu li ).eq(index).siblings().removeClass( current-page ); }); $( #navmenu ).on( click ,  .three_menu , function() { var index = $( #navmenu .three_menu ).index(this); $( #navmenu .three_menu .child_menu ).eq(index).slideDown(); }); $( #navmenu .three_menu ).on( click ,  li , function() { var index = $( #navmenu .three_menu li ).index(this); $( #navmenu .three_menu li a ).eq(index).css({  color :  beige  }); $( #navmenu .three_menu li a ).eq(index).parent().siblings( li ).find( a ).css({  color :  white  }); }); var str = window.screen.availHeight - 170; $( #rightContent ).css({  min-height : str }); var bdHeight = document.documentElement.clientHeight; $( #rightContent ).height(bdHeight - 65); } 

JSON编码(data.json):


{  data : [ {  menuId :  01 ,  menuName :  基本信息内容管理方法 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  职位管理方法 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  资格证书种类 ,  menuCode :  RR1234 ,  menuAction :  ?aldtype=16047#auto/zh  }, {  menuId :  001 ,  menuName :  职位资格证书 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  考勤管理种类 ,  menuCode :  Yggdcd ,  menuAction :  ?aldtype=16047#auto/zh  }, {  menuId :  001 ,  menuName :  专业技能级别 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  } ] }, {  menuId :  01 ,  menuName :  考勤管理管理方法 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  考勤管理入录 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  考勤管理审核 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  考勤管理查询 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  } ] }, {  menuId :  01 ,  menuName :  资格证书管理方法 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  工作人员资格证书 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  期满资格证书 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  缺少资格证书 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  资格证书统计分析 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  } ] }, {  menuId :  01 ,  menuName :  资格证书统计分析 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  职工资格证书统计分析 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  企业各资格证书状况 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  } ] }, {  menuId :  01 ,  menuName :  系统软件管理方法 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  组织管理方法 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  莱单管理方法 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  人物角色管理方法 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  客户管理方法 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  人物角色莱单 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  人物角色工作人员 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  工作人员管理方法 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  } ] },{  menuId :  01 ,  menuName :  工作人员动态性管理方法 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  工作人员异动归纳 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  工作人员调节(进行) ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  工作人员调节(审核) ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  }, {  menuId :  001 ,  menuName :  工作人员专业技能 ,  menuCode :  RR1234 ,  menuAction :  # ,  children : [ {  menuId :  001 ,  menuName :  职位信息内容 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  },{  menuId :  001 ,  menuName :  文凭信息内容 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  },{  menuId :  001 ,  menuName :  真实身份信息内容 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  },{  menuId :  001 ,  menuName :  当场评测 ,  menuCode :  RR1234 ,  menuAction :  /uploads/allimg/20530-1.jpg  } ] } ] } ] } 

因为应用了ajax,因此还记得要在网络服务器端运作。

标识: 時间轴 导航栏莱单


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503