element UI 对导航el-menu 样式的修改
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
**
element UI 对导航el-menu 样式的修改
**
对样式进行修改时
.el-menu--horizontal > .el-submenu .el-submenu__title,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title,
.el-submenu__title i {
color: #fff;
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
border-bottom: 2px solid #ff8923;
color: #fff;
}
//鼠标悬浮时,子菜单的样式
.el-menu-item:hover {
outline: 0 !important;
color: #ff8923 !important;
background: none !important;
}
// 一级菜单选中的样式
.el-menu-item.is-active{
color: #ff8923 !important;
border-bottom-color: transparent !important;
}
// 二级菜单 选中的样式
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title{
color: #ff8923 !important;
border-bottom-color: transparent !important;
}
//鼠标悬浮时,主菜单的样式
.el-submenu__title:focus,
.el-submenu__title:hover {
outline: 0 !important;
color: #fff !important;
background: none !important;
}
.el-menu--horizontal:focus,
.el-menu--horizontal:hover {
outline: 0 !important;
color: #fff !important;
background: none !important;
}
.nav-menu-son .el-menu--horizontal:hover{
background: pink!important;
}
.el-menu {
background-color: none !important;
}
.el-menu-item a:hover {
background: none;
}
.el-menu--popup-bottom-start {
margin-top: -2px;
}
.el-menu--popup {
background: none !important;
padding: 0 0;
min-width: 120px !important;
line-height: 40px !important;
box-shadow: 0 4px 8px 0 rgba(25,14,109,0.13);
border-radius: 5px;
}
.el-menu--horizontal .el-menu {
background: none;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
background-color: rgba(255, 255, 255, 0.6);
float: none;
height: 36px;
line-height: 36px;
padding: 0 22px;
color: #929292 !important;
z-index: 100;
font-weight: 500;
}
//二次菜单悬浮及背景样式
.el-menu--popup-bottom-start .el-menu-item:hover{
color: rgba(86,86,86,1) !important;
}
.el-menu--popup-bottom-start .el-menu-item{
background: #fff !important;
}
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)