侧边栏折叠菜单效果(内容自选)
时间: 2024-06-14 15:03:56 浏览: 17
以下是一个使用Vue.js实现的侧边栏折叠菜单效果的例子:
```html
<template>
<div>
<button @click="toggleSidebar">Toggle Sidebar</button>
<div class="sidebar" :class="{ collapsed: isCollapsed }">
<!-- Sidebar content -->
</div>
<div class="main-content">
<!-- Main content -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
isCollapsed: false
};
},
methods: {
toggleSidebar() {
this.isCollapsed = !this.isCollapsed;
}
}
};
</script>
<style>
.sidebar {
width: 200px;
height: 100vh;
background-color: #f0f0f0;
transition: width 0.3s;
}
.sidebar.collapsed {
width: 50px;
}
.main-content {
margin-left: 200px;
transition: margin-left 0.3s;
}
.main-content.collapsed {
margin-left: 50px;
}
</style>
```
在上面的例子中,我们使用了Vue.js来实现侧边栏折叠菜单效果。通过点击按钮,可以切换侧边栏的折叠状态。当侧边栏折叠时,它的宽度会变窄,主内容区域会向右移动,创建了一个动画效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)