el-menu二级菜单横向展开
时间: 2024-08-22 16:00:46 浏览: 41
"el-menu"是Element UI库中的一个组件,它通常用于创建导航菜单。如果要在二级菜单上实现横向展开的效果,你可以使用`collapse-transition`属性配合自定义CSS样式来模拟这种效果。`collapse-transition`是一个过渡动画,当二级菜单折叠或展开时会有平滑的切换。
下面是一个简单的例子:
```html
<el-menu default-active="1-2" class="menu-demo">
<el-menu-item index="1">
主菜单项 1
<el-submenu index="1-1">
<template slot="title">子菜单项 1</template>
<el-menu-item index="1-1-1">子菜单项 1-1</el-menu-item>
<!-- 添加更多的二级菜单项 -->
</el-submenu>
</el-menu-item>
<!-- 其他主菜单项和对应的二级菜单 -->
</el-menu>
<style scoped>
.menu-demo .el-submenu-collapse {
width: auto !important; /* 阻止默认的折叠 */
transition: all 0.3s ease-in-out; /* 添加过渡动画 */
}
.menu-demo .el-submenu-collapse.opened {
width: 200px; /* 展开宽度,可根据需要调整 */
}
</style>
```
在这个例子中,当你点击主菜单项时,`.el-submenu-collapse.opened`会应用自定义的宽度,并显示二级菜单。你可以根据实际需求调整过渡时间和宽度值。