element UI NavMenu 导航菜单样式修改

23 篇文章 0 订阅

.el-menu {

  background-color: rgba(165, 42, 42, 0);

}

.el-menu.el-menu--horizontal {

  border: none;

}

/* hover颜色改变 */

>>> .el-menu--horizontal > .el-submenu .el-submenu__title:hover {

  background: transparent;

  color: #d75b5f;

}

.el-menu--horizontal > .el-menu-item.is-active {

  border-bottom: none;

}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,

.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,

.el-menu--horizontal > .el-submenu .el-submenu__title:hover {

  background: transparent;

  color: #d75b5f;

}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {

  color: #d75b5f;

}

.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {

  border-bottom: none;

}

/* 点击出来的submenu下划线进行隐藏 */

::v-deep .el-submenu.is-active .el-submenu__title {

  border-bottom: #ebeef5 !important;

}

/* 消除下拉三角 */

>>> .el-icon-arrow-down:before {

  content: none;

}

  • 10
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
修改 Element UINavMenu 导航菜单里面选项的样式,可以使用以下两种方法: 1. 使用 Element UI 提供的样式类 在 NavMenu 组件中,每个选项都是一个 el-menu-item 组件,因此你可以使用 Element UI 提供的样式类来修改选项的样式。例如,要修改选项的背景颜色和字体颜色,可以在 CSS 文件中添加以下代码: ``` /* 修改选项的背景颜色 */ .el-menu-item.is-active, .el-menu-item:hover { background-color: #f0f0f0; } /* 修改选项的字体颜色 */ .el-menu-item.is-active a, .el-menu-item:hover a { color: #333; } ``` 2. 自定义 NavMenu 组件的模板 如果你需要更复杂的样式修改,可以自定义 NavMenu 组件的模板,在模板中添加自己的 CSS 样式。具体操作步骤如下: 1)在 Vue 组件中,使用 template 属性自定义 NavMenu 组件的模板,并在模板中添加自己的 CSS 样式。例如: ``` <template> <el-menu class="my-nav-menu"> <template v-for="item in menuData"> <el-menu-item :index="item.index" :key="item.index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </template> </el-menu> </template> <style scoped> .my-nav-menu { /* 自定义 NavMenu样式 */ } .my-nav-menu .el-menu-item { /* 自定义 NavMenu 选项的样式 */ } </style> ``` 2)在 Vue 组件的 script 标签中,使用 components 属性注册自定义的 NavMenu 组件,并在其他组件中使用自定义的 NavMenu 组件。 ``` <script> import { defineComponent } from 'vue'; import MyNavMenu from './MyNavMenu.vue'; export default defineComponent({ name: 'MyApp', components: { 'my-nav-menu': MyNavMenu, }, }); </script> <template> <div> <my-nav-menu :menuData="menuData" /> </div> </template> ``` 通过以上两种方法,你可以灵活地修改 NavMenu 导航菜单里面选项的样式

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值