element UI 对导航el-menu 样式的修改

最新推荐文章于 2024-08-30 11:47:49 发布

前端黑眼圈

最新推荐文章于 2024-08-30 11:47:49 发布

阅读量1.3w

点赞数 4

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36595944/article/details/114522689

版权

Element UI 导航菜单样式定制 CSS 前端开发

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

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;
}