使用Vue实现的类手风琴效果的侧边导航栏

目录

效果演示：

html:

JS:

CSS:

---

效果演示：

html:

1.  
   <template>
2.  
   <div class="outest-mainpage">
3.  
   <!-- 左边的导航菜单 -->
4.  
   <div class="left-nav">
5.  
   <div class="cover-box">
6.  
   <div class="status" :style="statusStyle"></div>
7.  
   <div @click="statusIndex = 0">人资管理</div>
8.  
   <div class="files" @click="statusIndex = 1">
9.  
   <div>档案管理</div>
10.  
    <ul :class="showFileUl ? 'files-ul show-ul' : 'files-ul'">
11.  
    <li @click="selected(0)" :class="keepStyleLiIndex === 0 ? 'keep-bg-li' : ''">档案登记</li>
12.  
    <li @click="selected(1)" :class="keepStyleLiIndex === 1 ? 'keep-bg-li' : ''">档案变更</li>
13.  
    <li @click="selected(2)" :class="keepStyleLiIndex === 2 ? 'keep-bg-li' : ''">档案复核</li>
14.  
    <li @click="selected(3)" :class="keepStyleLiIndex === 3 ? 'keep-bg-li' : ''">档案查询</li>
15.  
    <li @click="selected(4)" :class="keepStyleLiIndex === 4 ? 'keep-bg-li' : ''">档案删除与恢复</li>
16.  
    </ul>
17.  
    </div>
18.  
    <div class="sal" @click="statusIndex = 2">
19.  
    <div>薪酬管理</div>
20.  
    <ul :class="showSalUl ? 'sal-ul show-ul' : 'sal-ul'">
21.  
    <li @click="selected(5)" :class="keepStyleLiIndex === 5 ? 'keep-bg-li' : ''">薪酬标准</li>
22.  
    <li @click="selected(6)" :class="keepStyleLiIndex === 6 ? 'keep-bg-li' : ''">薪酬发放</li>
23.  
    </ul>
24.  
    </div>
25.  
    </div>
26.  
    </div>
27.  
    <!-- 中间的主要内容 -->
28.  
    <div class="center-content">
29.  
     
30.  
    </div>
31.  
    </div>
32.  
    </template>

JS:

1.  
   <script>
2.  
   export default{
3.  
   data(){
4.  
   return{
5.  
   statusIndex:0, // 指示轮廓的位置索引
6.  
   statusStyle:'transform:translate(0,0);', // 大标题的指示轮廓的位置
7.  
   keepStyleLiIndex:-1, // 保持背景的 li
8.  
   }
9.  
   },
10.  
    methods:{
11.  
    selected(index){ // 选中了指定的 li 保留其指示背景
12.  
    this.keepStyleLiIndex = Number.parseInt(index);
13.  
    }
14.  
    },
15.  
    watch:{
16.  
    statusIndex(newval, oldval){
17.  
    if(newval === oldval){ // 点击已展开的一级菜单，不变
18.  
    return;
19.  
    }
20.  
    this.keepStyleLiIndex = -1; // 移除原有的 li 指示背景
21.  
    if(newval === 0){ // 切换指示轮廓 展开和收起对应 ul
22.  
    this.statusStyle = 'transform:translate(0,0);';
23.  
    this.showFileUl = false;
24.  
    this.showSalUl = false;
25.  
    }else if(newval === 1){
26.  
    this.statusStyle = 'transform: translate(0,60px)';
27.  
    this.showFileUl = true;
28.  
    this.showSalUl = false;
29.  
    }else if(newval === 2){
30.  
    this.statusStyle = 'transform: translate(0,120px)';
31.  
    this.showFileUl = false;
32.  
    this.showSalUl = true;
33.  
    }
34.  
    }
35.  
    }
36.  
    }
37.  
    </script>

CSS:

        在这里，一级导航标题独享一个 div ，如果有附属二级导航列表的，就写在一级导航的 div 中、一级导航标题之后。

        手风琴效果主要用 ul 的动态高度来实现（ transition ）。

        ul 是二级导航列表，当其依附的一级导航没有被激活时，height ：0；

        当 ul 所依赖的一级导航被激活时，动态为其添加一个CSS类名，如这里的 .show-ul。该类名经过计算每个 li 的高度以及 li 的个数，算出 ul 的高度，然后设置 height 属性值为 ul 的准确高度。如果不使用具体数值的高度，使用 auto 的话，ul 的展开就没有达到过渡的效果，即展开和收起是在瞬间完成的。

1.  
   <style lang="scss" scoped>
2.  
   .outest-mainpage{
3.  
   width: 100vw;
4.  
   height: 100vh;
5.  
   min-width: 1200px;
6.  
   min-height: 700px;
7.  
   display: grid;
8.  
   grid-template-rows: 1fr;
9.  
   grid-template-columns: 18% 82%;
10.  
    box-sizing: border-box;
11.  
    background-image: linear-gradient(to right top, #adc2ff, #a6bdfa, #9fb8f6,
12.  
    #97b3f1, #90aeed, #97aeee, #9eaeee, #a5aeee, #bbb3f1,
13.  
    #cfb8f4, #e2bdf5, #f3c3f6);
14.  
     
15.  
    .left-nav{
16.  
    box-sizing: border-box;
17.  
    padding: 50px 0 0 0;
18.  
    overflow: hidden;
19.  
     
20.  
    .cover-box{
21.  
    width: 100%;
22.  
    display: flex;
23.  
    flex-direction: column;
24.  
    align-items: center;
25.  
    position: relative;
26.  
     
27.  
    div{
28.  
    font-size: 1.3rem;
29.  
    font-weight: 500;
30.  
    text-align: center;
31.  
    min-height: 60px;
32.  
    width: 100%;
33.  
    line-height: 60px;
34.  
    }
35.  
    div:hover{
36.  
    cursor: pointer;
37.  
    }
38.  
    ul{
39.  
    height: 0;
40.  
    width: 100%;
41.  
    overflow: hidden;
42.  
    transition: all 260ms linear 0s;
43.  
    text-decoration: none;
44.  
    font-size: 1rem;
45.  
    box-sizing: border-box;
46.  
    padding: 0;
47.  
    text-align: center;
48.  
    opacity: 0.8; /** 让文字颜色变淡 */
49.  
    padding: 0;
50.  
    margin: 0;
51.  
     
52.  
    li{
53.  
    width: 70%;
54.  
    margin: 0 15%;
55.  
    box-sizing: border-box;
56.  
    padding: 0;
57.  
    line-height: 45px;
58.  
    height: 45px;
59.  
    list-style-type: none;
60.  
    }
61.  
    li:hover{
62.  
    border-radius: 20px;
63.  
    background-color: rgba(#eee,0.2);
64.  
    }
65.  
    .keep-bg-li{
66.  
    border-radius: 20px;
67.  
    background-color: rgba(#eee,0.2);
68.  
    }
69.  
    }
70.  
    .status{
71.  
    position: absolute;
72.  
    width: 90%;
73.  
    margin-left: 5%;
74.  
    height: 60px;
75.  
    left: 0;
76.  
    border-radius: 30px;
77.  
    box-shadow: 0px 1px 10px 1px rgba(#eee,0.4);
78.  
    transition: transform 260ms linear 0s;
79.  
    }
80.  
    .files,.sal{
81.  
    display: flex;
82.  
    flex-direction: column;
83.  
    justify-content: center;
84.  
    align-items: center;
85.  
    position: relative;
86.  
     
87.  
    .show-ul{
88.  
    height: 225px;
89.  
    }
90.  
    }
91.  
    }
92.  
    }
93.  
    .center-content{
94.  
    box-sizing: border-box;
95.  
    }
96.  
    }
97.  
     
98.  
    </style>

这篇好文章是转载于：学新通技术网