【Element ui 的NavMenu二级菜单下拉icon修改】

最新推荐文章于 2024-08-06 23:57:40 发布

qq_40312477

最新推荐文章于 2024-08-06 23:57:40 发布

阅读量2.1k

点赞数 2

文章标签： ui css css3

本文链接：https://blog.csdn.net/qq_40312477/article/details/125788593

版权

Element ui 的NavMenu二级菜单下拉icon修改

原来是这样的，下拉icon在右边
在这里插入图片描述
修改成icon在左边，并更改icon的形状

修改icon的css属性，覆盖原来的。需要注意的是取消打开和关闭submenu的动画，否则点击icon的时候会有移动动画。

  .el-submenu__title i {
    //change the icon position
     position: absolute;
     left: -10px;
     top:50%;
     transform: translateY(-1px);//adjust position
    &:before {
      content: "\e790";//change icon type
      font-size: 16px;
      color: #979797;
    }
  }
  /*close menu*/
  .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
    transition: transform 0s;//cancel move animation
  }
  /*open menu*/
  .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg) translateX(185px);//185px is decided according to menu width
    transition: transform 0s;
  }