效果图:

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

本次制作要点:

 

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>
View Code

相关文章: