全国咨询热线:18720358503

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

类别:行业新闻 发布时间:2021-03-30 浏览人次:

最后实际效果图以下:

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

<):

 !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,因此还记得要在网络服务器端运作。

推荐阅读

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

最后实际效果图以下:!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...

2021-03-30
织梦cmsDedeCMS的vip会员邀约码申请注册软件 后台管

织梦cmsDedeCMS的vip会员邀约码申请注册软件很早以前之前就在织梦cms官方网社区论坛出現了,可是历经悠悠设计方案检测发觉存有有许多难题,压根应用不上,因此悠悠设计方案就对软件...

2021-03-30
微官网是啥?微网站,微官网要如何做?

微官网是啥?微网站,微官网要如何做?鼎盛致力于于互连网知名品牌基本建设与互联网营销推广,服务行业包含企业网站建设、电子器件商务接待、移动互联网网营销推广、系统软件服务...

2021-03-29
出口外贸企业网站建设必须重视的好多个关键点

网站精准定位 出口外贸网站说白了便是对外开放貿易运营的网站,朝向的是海外销售市场,但是看着你网站的客户则是海外客户,对于网站精准定位的销售市场要求状况,科学研究...

2021-03-29
文化教育企业网站建设计划方案

文化教育企业网站建设计划方案公布 次 创作者:023web 文化教育制造行业企业网站建设的必需性伴随着社会发展发展趋势,考量一本人不是是优秀人才包括几大关键点:文凭和专业技能...

2021-03-29
档案资料网站的制作标准

档案资料网就是我国第一家有关档案资料梳理的技术专业家网站。网站秉持基础理论与实践活动并举、工作中与日常生活兼具之核心理念,煅造“原創、服务和資源”的三大关键市场竞...

2021-03-29
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信