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;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
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 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)