首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >三级侧边栏-树形菜单案例效果

三级侧边栏-树形菜单案例效果

作者头像
xing.org1^
发布2018-05-17 16:05:16
4.8K0
发布2018-05-17 16:05:16
举报
文章被收录于专栏:前端说吧前端说吧

效果图:

本次制作要点:

html:

结构上,要把li内部的文字和待展开的元素分开来,便于后期样式上的把控和逻辑上的处理。

 1 <div class="sidebar-list">
 2           <ul class="first-class">
 3             <li class="first-class-li cur"><a href="javascript:;"><i class="icon icon-activity"></i>个人报表</a>
 4               <ul class="sec-class" style="display:block;">
 5                 <li class="sec-class-li cur"><a href="javascript:;"><i class="icon icon-order"></i>今日报表</a>
 6                   <ul class="thr-class" style="display:block;">
 7                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
 8                     <li class="thr-class-li cur"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
 9                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
10                   </ul>
11                 </li>
12                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>历史报表</a>
13                   <ul class="thr-class">
14                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
15                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
16                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
17                   </ul>
18                 </li>
19                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-order"></i>计划报表</a>
20                   <ul class="thr-class">
21                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表标题</a></li>
22                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表内容</a></li>
23                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-document"></i>报表审核</a></li>
24                   </ul>
25                 </li>
26               </ul>
27             </li>
28             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-collection"></i>个人收藏</a>
29               <ul class="sec-class">
30                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>报表收藏</a>
31                   <ul class="thr-class">
32                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
33                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
34                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
35                   </ul>
36                 </li>
37                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>图片收藏</a>
38                   <ul class="thr-class">
39                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
40                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
41                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
42                   </ul>
43                 </li>
44                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-select"></i>账户收藏</a>
45                   <ul class="thr-class">
46                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏链接</a></li>
47                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏标题</a></li>
48                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-like"></i>收藏内容</a></li>
49                   </ul>
50                 </li>
51               </ul>
52             </li>
53             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-share"></i>我的分享</a>
54               <ul class="sec-class">
55                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-praise"></i>朋友圈分享</a>
56                   <ul class="thr-class">
57                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-task"></i>报表分享</a></li>
58                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图片分享</a></li>
59                   </ul>
60                 </li>
61               </ul>
62             </li>
63             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-picture"></i>图库</a>
64               <ul class="sec-class">
65                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-computer"></i>本机</a>
66                   <ul class="thr-class">
67                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-camera"></i>相机照片</a></li>
68                   </ul>
69                 </li>
70               </ul>
71             </li>
72             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-dynamic"></i>成长记录</a>
73               <ul class="sec-class">
74                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-barrage"></i>历史记录</a>
75                 </li>
76                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-createtask"></i>任务记录</a>
77                 </li>
78               </ul>
79             </li>
80             <li class="first-class-li"><a href="javascript:;"><i class="icon icon-coupons"></i>账户信息</a>
81               <ul class="sec-class">
82                 <li class="sec-class-li"><a href="javascript:;"><i class="icon icon-workbench"></i>客户端信息</a>
83                   <ul class="thr-class">
84                     <li class="thr-class-li"><a href="javascript:;"><i class="icon icon-editor"></i>修改信息</a></li>
85                   </ul>
86                 </li>
87               </ul>
88             </li>
89           </ul>
90         </div>

 css

样式上:通过一个cur类名,来控制后期的所有选中的效果,

 1 .sidebar-list {
 2   margin: 0 45px;
 3 }
 4 
 5 .sidebar-list a {
 6   font-size: 16px;
 7   color: #6e8095;
 8   font-family: "黑体";
 9 }
10 
11 .sidebar-list a:hover {
12   color: #fff;
13 }
14 
15 .sidebar-list .icon {
16   margin-right: 5px;
17 }
18 
19 .sidebar-list .sec-class-li {
20   position: relative;
21 }
22 
23 .sidebar-list .sec-class-li:after {
24   content: "";
25   position: absolute;
26   z-index: 10;
27 }
28 
29 .sidebar-list .sec-class-li:after {
30   top: 21px;
31   left: 0;
32   width: 6px;
33   height: 6px;
34   overflow: hidden;
35   border-right: 1px solid #6e8095;
36   border-bottom: 1px solid #6e8095;
37   -webkit-transform: rotate(-45deg);
38   -moz-transform: rotate(-45deg);
39   -ms-transform: rotate(-45deg);
40   transform: rotate(-45deg);
41   -webkit-transition: transform 0.5s;
42   -moz-transition: transform 0.5s;
43   -ms-transition: transform 0.5s;
44   transition: transform 0.5s;
45 }
46 
47 .sidebar-list .sec-class-li.cur:after {
48   top: 19px;
49   border-right: 1px solid #fff;
50   border-bottom: 1px solid #fff;
51   -webkit-transform: rotate(45deg);
52   -moz-transform: rotate(45deg);
53   -ms-transform: rotate(45deg);
54   transform: rotate(45deg);
55   -webkit-transition: transform 0.5s;
56   -moz-transition: transform 0.5s;
57   -ms-transition: transform 0.5s;
58   transition: transform 0.5s;
59 }
60 
61 .cur > a {
62   color: #fff;
63 }
64 
65 .red > a {
66   color: red;
67 }
68 
69 .first-class li {
70   padding-top: 15px;
71 }
72 
73 .sec-class, .thr-class {
74   display: none;
75   margin-left: 22px;
76   font-size: 14px;
77 }
78 
79 .sec-class > li {
80   padding-left: 12px;
81 }
82 
83 .sec-class > li:hover {
84   color: #fff;
85 }

js

逻辑上:这次遇到用 “is()” 函数判断列表是否展开,但是未知原因不起效果,所以用了content.clientHeight来通过高度是否已经展开

 1 $(function(){
 2     $(".first-class>li").click(function(e){
 3         var $index = $(this).index();
 4         var $height = $(this).context.clientHeight;
 5          e = window.event || e;
 6        e.stopPropagation();
 7         if($height > 34){
 8             $(this).removeClass("cur");
 9             $(this).children(".sec-class").slideUp("fast");
10             $(this).children(".sec-class").children("li").children(".thr-class").slideUp("fast");
11             $(this).children(".sec-class").children("li").removeClass("cur");
12         }else{
13             $(this).addClass("cur").siblings("li").removeClass("cur");
14             $(this).children(".sec-class").slideDown("fast");
15             $(this).siblings("li").children(".sec-class").slideUp("fast");
16             $(this).siblings("li").children(".sec-class").children("li").children(".thr-class").slideUp("fast");
17             $(this).siblings("li").children(".sec-class").children("li").removeClass("cur");
18         }
19     });
20     $(".sec-class>li").click(function(e){
21          e = window.event || e;
22        e.stopPropagation();
23         var $index = $(this).index();
24         var $height = $(this).context.clientHeight;
25         if($height > 34){
26             $(this).children(".thr-class").slideUp("fast");
27             $(this).removeClass("cur");
28             $(this).children(".thr-class").children("li").removeClass("cur");
29         }else{
30             $(this).addClass("cur").siblings("li").removeClass("cur");
31             $(this).children(".thr-class").slideDown("fast");
32             $(this).siblings("li").children(".thr-class").slideUp("fast");
33             $(this).siblings("li").children(".thr-class").children("li").removeClass("cur");
34         }
35     });
36     $(".thr-class>li").click(function(e){
37          e = window.event || e;
38        e.stopPropagation()
39         $(this).addClass("cur").siblings("li").removeClass("cur");
40         var question = confirm("你确定要跳转新页面吗","跳转成功");
41         if(question){
42             alert("恭喜答对了!")
43         }else{
44             alert("很遗憾,链接无效!")
45         }
46     })
47 
48 })

 js懒得整理了。。。

声明:

  请尊重博客园原创精神,转载或使用图片请注明:

  博主:xing.org1^

  出处:http://www.cnblogs.com/padding1015/

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档