element导航栏修改悬停及选中样式

Element -导航栏修改悬停及选中样式

element导航栏修改悬停及选中样式

**修改导航栏样式时el-menu-item和el-submenu有区别
el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用

原效果

el-menu-item部分
<style lang="less" scoped>
.el-menu-demo {
  height: 92px;
  font-weight: bold;
}
//设置了行高和字体大小、高度颜色
.el-menu-item {
  font-size: 16px;
  height: 92px;
  line-height: 92px;
  color: #666666;
  transition: none !important; 
}
//设置选中el-menu-item时的状态
.el-menu-item .is-active{
  border-bottom-color: none !important;
}
//设置选中el-menu-item时的样式
.el-menu-item:hover{
    color: #1787FB !important;
    text-decoration: underline;
}
    
//去掉选中el-menu-item时的下划线
.el-menu--horizontal > .el-menu-item {
  border-bottom: none !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none !important;
}
</style>

el-submenu部分
// el-submenu的代码不能包含在scoped
<style lang="less">
//修改
.el-submenu .el-submenu__title {
  font-weight: bold;
  font-size: 16px;
  color: #1787FB;
}
.el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 92px;
    line-height: 92px;
    border-bottom: 2px solid transparent;
    color: #666666;
    i{
      font-size: 16px;
      font-weight: bold;
    }
}
.el-menu .el-menu--popup .el-menu--popup-bottom-start{
  top: 92px;
}

.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    color: #1787FB;
    /* less语法，实现鼠标悬停时icon变色 */
        i {
            color: #1787FB;
        } 
}

elementUI修改navMenu带有二级菜单的title样式

在Element中的NavMenu的横向导航菜单，默认菜单高度是60px,el-menu-item可以修改样式，但是二级菜单，样式就无效。

二级菜单是使用slot添加的，单独给这个slot添加样式，等渲染出来，样式却没有了。

解决方法

<style lang="less">
.el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 92px;
    line-height: 92px;
    border-bottom: 2px solid transparent;
    color: #666666;
    //设置小图标
    i{
      font-size: 16px;
      font-weight: bold;
    }
}
</ style>

效果

遇到Module not found:Error:Can`t resolve ‘less-loader’ 问题

<style lang="less" scoped></style>

需要安装less

npm install --save-dev less-loader less