zoukankan      html  css  js  c++  java
  • elementui更改导航栏样式

     本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写

    以下效果:

     放上代码

    <style>
    .el-menu-demo{
        height: 40px;
        /* border-bottom-color:none!important; */
        background-color:rgba(0,0,0,0);
        float:right;
        margin-right: 8.54%;
    
    }
    /* 点击出来的下划线进行隐藏 */
    .el-menu-item.is-active {
        border-bottom: none!important;
        color: rgba(0,0,0,0);
    }
    /* 整体的下划线进行隐藏 */
    .el-menu.el-menu--horizontal{
      border-bottom: none;
    }
    /* 导航栏的间距等样式 */
    .el-menu-item {
      padding: 0 62px;
      font-size: 16px;
    }
    
    /* 点击出来的下划线动效残留进行隐藏 */
    .el-menu--horizontal>.el-menu-item{
        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-color: rgba(0,0,0,0);
    }
    </style>

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    分页查询+组合查询
    单点登录3
    单点登录2
    单点登录1
    sql server 语句
    jsTree动态加载数据
    sql 根据日期模糊查询&SQL Server dateTime类型 模糊查询
    快捷键
    JQUERY获取当前页面的URL信息
    C#中的?和??的用法
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11957814.html
Copyright © 2011-2022 走看看