更改NavMenu 导航菜单激活时的背景颜色

最新推荐文章于 2023-04-20 13:20:15 发布
原创 最新推荐文章于 2023-04-20 13:20:15 发布 · 5.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种通过 CSS 来设置导航菜单中激活状态项背景颜色的方法。使用 .el-menu-item.is-active 选择器并设置 background-color 属性可以实现这一效果。

效果图

在这里插入图片描述

方法

写在< style >中

.el-menu-item.is-active {
  background-color: #2674c5 !important;
}

我这边显示的是灰色的，我以为没用，原来是可以用的
在这里插入图片描述

element菜单组件样式修改NavMenu导航菜单
见贤思齐焉，见不贤内自省
06-06 4650
element菜单组件样式修改NavMenu导航菜单
更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线
Y2960018173的博客
12-05 3137
【代码】更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线。
菜单导航(鼠标点击那个菜单，那个菜单背景颜色改变)
06-23
菜单导航(鼠标点击那个菜单，那个菜单背景颜色改变)
设置UINavigation的背景图片和背景颜色
CharlesBein_卞
01-22 2万+
//通过背景图片来设置背景 float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue]; UIImage *backgroundImage = [UIImage imageNamed:@"navbg.png"]; //获取图片 if(systemVersion>=5.0) { CGSize ti
修改vue-element-admin中导航菜单被激活后的背景色
weixin_55966654的博客
10-28 3549
修改vue-element-admin被选中后的菜单背景色
NavMenu 导航菜单获取选中信息
最新发布
12-27
### 如何在 NavMenu 组件中获取当前选中的菜单项信息 #### Vue 2 + Element UI 为了获取 `el-menu` 当前选中的菜单项，在 Vue 2 版本的 Element UI 中可以监听 `select` 事件。当用户点击某个菜单项时会触发此事件...
C#2008下开用用的navmenu菜单
02-05
在C# 2008开发环境中，NavMenu（导航菜单）是一种常见的用户界面元素，用于提供应用程序的主要功能入口。这个“C#2008下开用用的navmenu菜单”很可能是一个自定义控件或者代码库，设计用于简化在C#应用中创建和管理...
修改layui的后台模板的左侧导航栏可以伸缩的方法
10-16
在上述代码中，我们首先为导航栏添加了一个控制按钮，然后编写了一个JavaScript函数，该函数会在点击按钮时切换导航栏的`layui-nav-collapse`类，通过这个类来控制导航栏的宽度。最后，通过CSS样式来定义导航栏在...
ElementUI NavMenu菜单样式自定义与悬浮效果实现
本文围绕“NavMenu样式修改”这一主题，深入剖析如何通过自定义CSS样式对Element UI中的导航菜单进行深度定制，涵盖主菜单项、子菜单项、悬浮效果、激活状态、背景颜色、字体颜色、边框样式等多个视觉层面的调整策略...
element的NavMenu hover时的下拉框的高度修改
11-07
Element UI 的 `el-menu` 元素通常是一个导航菜单组件，当鼠标悬停在某个选项上时，它会显示一个下拉菜单。如果你想修改下拉框（submenu）的高度，你可以通过 CSS 进行自定义样式设置。 首先，在你的 CSS 文件中，...
【修改el-menu主菜单和子菜单悬浮的背景色】
weixin_44995829的博客
10-18 1万+
【修改el-menu主菜单和子菜单悬浮的背景色】
element导航栏navmenu样式修改
weixin_52725484的博客
04-20 986
样式修改包括子菜单、以及替换icon、选中样式改变字体颜色以及一级菜单高亮保持不变等、但是还未实现子菜单根据一级菜单宽度改变自身宽度、目前采用固定宽度的方式实现。
改变虚拟导航栏(navigation bar)背景色及图标颜色
热门推荐
Chrissen's Blog
05-16 2万+
众所周知，安卓系统中存在着虚拟的导航栏，它们不是实体按键，而是通过软件实现的。一般而言，虚拟导航栏是长成下面这样的： 系统中默认虚拟导航栏的背景是黑色的，按键的颜色是白色。但是如果软件需要自定义主题色，很多时候，我们都希望它的背景色能跟主题色保持一样。那我们怎么实现呢？ <item name="android:navigationBarColor">@color/colorPrima...
导航栏背景色、标题颜色以及返回键自定义
miaocuilin的专栏
07-25 2210
1.导航栏背景色设置： //设置为半透明 self.navigationController.navigationBar.translucent = YES; //设置背景色及透明度 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageWithColor:[UICol
Element-ui(NavMenu导航的使用)
m0_60687710的博客
08-26 1204
#NavMenu 导航菜单 <el-aside :width="isCollapse ? '64px' : '200px'"> <!-- 控制左侧菜单是否收起的开关 --> <div @click="isClose" class="togger-button">|||</div> <!-- 左侧菜单区域 --> <el-menu background-color="...
Naive UI修改默认样式
weixin_51615179的博客
03-17 5665
因为大创的缘故，需要做出一个网站，在搭建网站的过程中需要使用Naive UI框架，在设置样式的时候一直无法修改默认样式。小白不知道应该如何使用样式穿透，同时和Naive UI相关的博客比较少，导致只能自己一步步摸索，所幸，找到了最后的解决办法。（注意，这个解法可能只适合Naive UI。
Menu菜单导航API文档
qq_40291247的博客
07-24 1611
wb-menu参数： 参数 说明 类型 可选 默认 必填 active 默认选中哪个（以index唯一名称为准） String - - 否 openeds 默认展开第几组 Array[‘1’] - - 否 isrouter 是否使用 vue-router 的模式，以 index 作为 path 进行路由跳转 Boolean true/false - 否 trees 菜单数据（参数看下面↓↓） Array - - 是 backgroundColor 菜单的背景色（仅支持 hex
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值