antDesign menu 自定义修改选中样式，一级和多级菜单

项目里一级菜单和二级菜单都存在的情况下，需要对选中的父级菜单做高亮选中状态

问题描述

二级和一级菜单互不影响选中(我这都选中了)


.ant-menu-submenu-selected > .ant-menu-submenu-title {position: relative;
}
.ant-menu-submenu-selected > .ant-menu-submenu-title:before {width: 4px;height: 20px;position: absolute;content: "";left: 0;background: pink;
}

解决方案：

当有子菜单时，不希望子菜单选中，通过观察，将兄弟级下的选中子菜单排除掉


.ant-menu-item-selected {position: relative;
}
.ant-menu-item-selected:before {width: 4px;height: 20px;position: absolute;content: "";left: 0;background: pink;
}.ant-menu-submenu-selected > .ant-menu-submenu-title {position: relative;
}
.ant-menu-submenu-selected > .ant-menu-submenu-title:before {width: 4px;height: 20px;position: absolute;content: "";left: 0;background: pink;
}
.ant-menu-submenu-selected.ant-menu-submenu-title+ ul.ant-menu-item-selected:before {display: none;
}

这样就可以了！！

antDesign menu 自定义修改选中样式，一级和多级菜单相关推荐

自定义checkbox选中样式
方案1:修改label的before html: <div class="custom-checkbox"><input id="checkbox&qu ...
伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行
1.::selection CSS3伪类自定义文本选中时的样式有的人在浏览网页时,喜欢一边选中文本一边阅读.在windows环境下,正常的文本选中应该是深蓝色背景白色文本的样式.那么想要修改文本选中 ...
php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
一, vue_elementUI_ tree树形控件 1.默认点击tree节点的第一个(注意不是checked选中) @node-drop="handleDrop"ref=&qu ...
Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图:如下注意事项: 1.使用echarts最好看官方文档,官方文档(链接如下) https://echarts.apache.org/examples/zh/index.html#chart-t ...
微信小程序radio单选框如何修改宽高及选中样式
之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) */的下面定义的css需要加上!im ...
html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...
elementUI radio选中样式修改为勾勾
elementUI radio选中样式修改为勾勾 // radio选中改为勾勾 .el-radio__input.is-checked .el-radio__inner::after {content ...
Qt修改鼠标样式为自定义图标
1.修改鼠标样式代码如下(示例): //修改鼠标样式QString mouseFileName = qApp->applicationDirPath() + '/' + "Confi ...
elementUI表格样式自定义修改
表格头部.斑马行等修改头部样式绑定的:header-cell-style,用header-cell-class-name类名的方式没弄出来,就在行内使用的vw一样能响应式 <div class ...

antDesign menu 自定义修改选中样式，一级和多级菜单

antDesign menu 自定义修改选中样式，一级和多级菜单

问题描述

解决方案：

antDesign menu 自定义修改选中样式，一级和多级菜单相关推荐

最新文章

热门文章