开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

SVG汉堡包菜单:我怎么才能在每次点击它的时候改变它的颜色呢？

要实现SVG汉堡包菜单在每次点击时改变颜色的效果，你可以使用JavaScript来监听点击事件，并在事件触发时修改SVG元素的样式。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG汉堡包菜单</title>
<style>
  .menu-icon {
    cursor: pointer;
    fill: #000; /* 初始颜色 */
  }
</style>
</head>
<body>
<svg class="menu-icon" width="30" height="20" viewBox="0 0 30 20">
  <rect width="30" height="4" rx="2" ry="2"/>
  <rect y="8" width="30" height="4" rx="2" ry="2"/>
  <rect y="16" width="30" height="4" rx="2" ry="2"/>
</svg>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
  const menuIcon = document.querySelector('.menu-icon');
  let isClicked = false;

  menuIcon.addEventListener('click', function() {
    isClicked = !isClicked;
    menuIcon.style.fill = isClicked ? '#FF0000' : '#000000'; // 切换颜色
  });
});

解释

HTML部分:
- 创建了一个SVG元素，代表汉堡包菜单。
- 使用CSS设置了初始颜色（黑色）。

JavaScript部分:
- 在文档加载完成后，为SVG元素添加点击事件监听器。
- 每次点击时，切换isClicked变量的值，并根据这个值改变SVG元素的fill属性，从而实现颜色的切换。

应用场景

这种交互效果常用于移动端网站的导航菜单，通过点击汉堡包图标展开或收起菜单，并通过颜色变化给予用户视觉反馈。

可能遇到的问题及解决方法

颜色切换不明显: 可以尝试使用对比度更高的颜色组合，或者在颜色变化时添加过渡动画。
点击事件不触发: 确保JavaScript代码正确加载，并且没有其他脚本错误干扰事件监听。

通过这种方式，你可以轻松实现SVG汉堡包菜单在每次点击时改变颜色的效果，提升用户体验。

相关搜索:我的汉堡包菜单在点击它的项目时消失了我点击进入回收器视图的项目，它改变了两个itemViews的背景颜色我正在试着做一个简单的程序，每次我点击它的时候都会将innerText更改为一个不同的单词 cocos2d-x什么是每次我需要的时候制作一个精灵或者只是改变它的纹理的最佳实践？我希望tkinter中的一个按钮可以独立地改变颜色，而不需要我亲自点击它。VueJS:直接改变一个道具真的很糟糕吗?即使我想让它在每次重新渲染的时候都重写它的值？我怎么才能让敌人追赶玩家呢？我还想知道当我跳的时候如何跳到移动的物体上，而不仅仅是穿过它国外服务器购买的价格 git面板连接服务器 gsm模块服务器连接

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

来自用户体验大师的100个UX设计建议——上篇

在Intechnique机构，我们一直都在研究并应用最好的用户体验原则。今年早些时候，我成为了世界上第9个获得尼尔森诺曼集团(Nielsen Norman Group)颁发的UX硕士学位的人。...如果你的网站层次结构超过3-4级，是时候考虑重新设计了。 30. 考虑使用粘性菜单导航(跟随浏览器滚动的导航)，特别是在较长的网页中或需要快速访问时。 31....使用面包屑导航，让用户知道他们在网站上所处的位置。 35. 移动端导航设计：显示最常用的选项，并将其他选项隐藏在汉堡包菜单下。 36....桌面端的汉堡菜单使用场景较少，因为它并不是非常引人注目，用户也不熟悉，增加了交互成本，减少了信息的呈现。 37. 对于手机的辅助导航，可以使用分类登录页面、子菜单或页面内菜单。 38....网站上的链接必须突出——使用蓝色文本或下划线来表示超链接。 49. 链接应该看起来就是链接的样子。 50. 链接文本应该表明链接的指向，而不是让用户通过点击一个链接来找出它的指向。

1.7K3 0

响应式设计

有时候需要反复调试HTML里的代码才能实现。矛盾的汉堡包菜单:汉堡包菜单最近几年很流行。它解决了在小屏幕里显示更多内容的问题，但是也有弊端。...当链接太小不好点击，或者用户想要把某个图片看得更清楚时，这个设置会阻止他们缩放页面。 # 媒体查询媒体查询（media queries）允许某些样式只在页面满足特定条件时才生效。...同时当用户默认字号改变的时候，em 还能相应地缩放，因此它更适合当断点。在媒体查询里更适合用 em，em 是基于浏览器默认字号的（通常是 16px）。...使用 display: none 隐藏不重要的内容，比如导航菜单和页脚。还可以将整体的字体颜色设置成黑色，去掉文字后面的背景图片和背景色。...https://codepen.io/cellinlab/pen/LYeJOrM # 使用 srcset 提供对应的图片媒体查询能够解决用 CSS 加载图片的问题，但是 HTML 里的标签怎么办呢

2.1K1 0

如何使用Fluent Design System (上)

对设计师和开发人员来说这个主题可能不太有趣，毕竟它看起来只是繁琐，一点都不华丽。但我觉得重申这个主题十分重要，UWP诞生的目的就是为了打造能在各种设备上运行的通用应用，伸缩性对UWP至关重要。...3.1 使用NavigationView更新导航菜单以前很多教程都专门讲解了怎么制作汉堡包菜单，现在UWP终于提供了默认方案。...NavigationView是Fall Creators Update提供的新导航菜单，它应用了FDS最常用的两个特效：Acrylic和Reveal，可以折叠及最小化，使用简单： <NavigationView...RootFrame" Navigated="RootFrame_Navigated"> 3.2 将内容扩展到标题栏在程序启动或每次更改主题颜色时调用...SetupTitlebar()这个函数，注意要根据当前主题颜色改变TitleBar上按钮的颜色（因为官方文档上没有，所以很多人会忘了处理按钮的颜色）： private static void SetupTitlebar

2.4K3 0

脑洞真大！这个 CSS 库帮你做汉堡？

美味的 CSS 动画汉堡，要不要尝尝？大家好，我是鱼皮，今天教大家做汉堡包。...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...比如我需要一个点击后折叠的汉堡菜单，对应的类名是 hamburger--collapse，则代码如下： <button class="hamburger hamburger--collapse" type...--- 最后，看下这个库的浏览器兼容性，由于它使用了 CSS3 3D transforms，因此支持除 IE9 和 Opera Mini 外的所有主流浏览器。

1.4K3 1

一步步教你用CSS添加SVG过滤器

在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。...如果你此刻在浏览器中查看页面，将看到一个带有一些文本的图像。当前标题仍然是没有样式的，接下来为它设置样式并应用 SVG 过滤器。...加入 headline 把 line-height 设置为零，因为稍后标题将被加上动画效果，所以控制页面上的缩放很重要。它设定了 padding 值，使其周围能够有适量的空间，颜色也会改变。...尝试改变波纹的频率和振幅。...，因为它前面还有一个复选框和汉堡包样式的图标。

2.9K2 0

脑洞真大！这个 CSS 库帮你做汉堡？

美味的 CSS 动画汉堡，要不要尝尝？大家好，我是鱼皮，今天教大家做汉堡包。...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...比如我需要一个点击后折叠的汉堡菜单，对应的类名是 hamburger--collapse，则代码如下： <button class="hamburger hamburger--collapse" type...--- 最后，看下这个库的浏览器兼容性，由于它使用了 CSS3 3D transforms，因此支持除 IE9 和 Opera Mini 外的所有主流浏览器。

1.3K1 0

该如何以正确的姿势插入SVG Sprites？

、iphone x等大屏的手机全糊了，当时我就懵逼了，我说怎么会呢，后面一看，果然如此啊，看了下代码，原来是用的图片，我说为什么不用svg呢？？...然后同事说一个一个的图标好麻烦，我说可以用svg sprite啊，～～＞﹏＜，这个时候轮到同事一脸懵逼了……，所以想着可能是不是同样还有很多同学也不知道 SVG symbols呢，那么这就给大家分享一下...里的坐标，还有颜色的改变，我们可以直接在svg内的 path上写行内式 fill="#06c"、style="fill:#06c";都是可以的，在维护上，是不是比图片更加方便呢？？？　　...，因为小图的id不会随便改动; 方便改变图片颜色，通过设置fill:颜色值，随意改变小图颜色; IE9以上支持。...，需要再次修改csss样式，或每次都要打开PS删除某图标再导出; 无法修改小图颜色，要UI设计师调整后替换，过程漫长效率低; 在移动端的大屏手机图标会模糊，影响体验。

6554 0

手把手教你写高质量Android技术博客，画图工具，录像工具，Markdown写法

分享了自己的经历，也是想告诉大家，不管我们过去什么样，从事过什么工作，只要你现在想去改变点什么，你就去做，只要自己够努力，有刻苦钻研的精神，迟早一天也会发光发亮，谁说文科生不能写代码呢？...哈哈，说这么多让大家见笑了，接下来，我讲讲怎么写博客吧。...插入文字在图形上直接双击就可以了，也可以去拖拽，或者点击插入菜单，文字可以调整字体大小，颜色线条可以点击插入菜单，也可以直接从图形上拖出来，调整粗细，样式，颜色...功能跟processon基本一致，操作也十分类似，比如画图形插入文字，改变字体大小，颜色，样式插入线条，改变线条粗线，颜色，样式等 Google Drawings 与...直接在图形或线条上双击即可，支持修改字体大小等也不在话下，而且支持插入各种特殊字符，只要word能做的，它都能做画线方面，可以画折线，贝塞尔曲线，可以改变线条粗细，样式，颜色保存文件除了支持

1.1K1 0

开发工具总结（1）之图文并茂全面总结上百个AS好用的插件（上）

【缺点】 (1) 生成的menu需要自己复制粘贴，很麻烦。 (2) 每次都要手动设置路径和包名，很麻烦。 (3) 生成的点击事件需要自己去导包，很麻烦。...SVG2VectorDrawable 使用 ---- 2.Android Holo Colors Generator 通过自定义Holo主题颜色生成对应的【Drawable】和【布局文件】，点击导航栏的蓝色的...各种右键，各种菜单栏都找了，找不到使用方式，找了半天最后在导航栏有个蓝色的H符号，太坑了，官方也没有讲解怎么使用。 ?...(默认的是Meta + I ,windows上没有这个快捷键，我就改成了Alt + I, 点击菜单栏File -> Settinigs -> Keymap -> 搜索Translate - > 右键 add...的困扰： 1.ButterKnife这个第三方库每次更新之后，绑定view的注解都会改变，从bind,到inject，再到bindview，搞得很多人都不敢升级，一旦升级，就会有巨量的代码需要手动修改

9921 0

“改造” VS Code 编辑器，一起写个插件吧！

正因为有了清楚的定位和方向，才会有了更加清晰的边界。或许你很疑惑，他是怎么支持多种语言的又做到轻量级的？那我们不得不来看一下它的多进程架构。...修改我们的 package.json 如下，因为当前我希望插件加载的时候就已经订阅了按钮的点击事件，所以这里我们可以把 activationEvents 改成 *，这样的话我们的插件在一开始就可以激活并注册事件了...那我们现在就来分析一下我们上面做的事情。首先，我们修改了 package.json 里的配置，增加了一个 menus ，这个 menus 是什么呢？答案是菜单。...菜单项定义包含选择时应调用的命令以及该项应显示的条件（when），所以你也可以给这个菜单项显示加个显示的逻辑，比如我们规定在打开 javascript 文件时才显示这个按钮： { "contributes...如果你好奇还有哪些菜单，我这里简单整理「翻译」了一下官网的内容（仅常见菜单非全部）：配置菜单项的名称菜单位置 commandPalette 全局命令面板 explorer/context 资源管理器上下文菜单

6632 0

scetch入门第2部分：文本，对齐和SVG在第3部分中了解如何导出文件

背景这是本教程第1部分的延续。在本部分中，我们将介绍文本工具，对齐以及在Sketch中使用导入的矢量图形。文字和对齐方式好吧，让我们打开插入菜单并写一些文字！ ? 添加文字我写了“香蕉”。...我在The Noun Project下载了Will Deskins设计的可爱猴子图标。点击这里直接下载SVG。（记得根据名词项目的指导方针在你的项目中给予肯定！）...下载并解压缩SVG文件后，将其直接拖到Sketch画板中。 ? 将SVG拖动到画板选中图标后，让我们在屏幕左侧的“图层”菜单中进行一些调查。...显示所有图层由于我在本教程中对艺术家给予了赞誉，因此我通过点击删除来删除嵌入的文本图层。当您使用他人的作品时，请确保在下载时始终给予奖励或付费。 ? 打开图层现在是时候做一些侦探工作了。...将颜色更改为黄色你在这里做的是用“顶部矩形”样式更改形状，这会影响项目中的两个矩形。你猜怎么着？您也可以使用文本样式执行此操作。 ? 创建文本样式选择一条黑色文本行并创建一个新的文本样式。

4.1K3 0

23个高手都在用的Figma小技巧！（2022新专辑）-Part 01

微调文本，颜色和数值选择一个彩色形状并打开颜色菜单，按住 shift 键并上下移动方向键。您可以看到颜色“一点点的变化”。如果您使用鼠标滚轮，也可以更改颜色的色调。...如果在缩放时按住 alt，这也会改变不透明度。您还可以微调任何其他字段，例如行高。 ‍ 提示：在排版和行高上使用 4 或 8pt 的幅度来设置你的字体比例！...而且您的组件名称又好又短。在我的示例中，我为移动设备创建了一个页面，为通用创建了一个页面（我可以为每个断点设置一个，或者为 web 和应用程序、android 或 iOS 设置一个库，你懂的）。...你现在可以将它粘贴到你的 Figma 文件中，它仍然是一个可扩展和可编辑的SVG，它的所有图层都包含在内。试试阿里巴巴图标库中的复制SVG功能，那个更方便。...011.快速选择所需图层有时候图层太多，你会无法找到所需的图层，这个时候只要在这个图层或者组的位置点击右键选择“Select Layer”，就可以快速找到你想要的图层了。

3.9K3 0

堪比阿里插件的Android Studio插件集合(IDE通用)（上）

有人会问了，网上也有很多博客在讲Android Studio的插件总结，为什么你还要弄一篇博客呢？...【缺点】 (1) 生成的menu需要自己复制粘贴，很麻烦。(2) 每次都要手动设置路径和包名，很麻烦。(3) 生成的点击事件需要自己去导包，很麻烦。...SVG2VectorDrawable 使用 2.Android Holo Colors Generator 通过自定义Holo主题颜色生成对应的【Drawable】和【布局文件】，点击导航栏的蓝色的 H...各种右键，各种菜单栏都找了，找不到使用方式，找了半天最后在导航栏有个蓝色的H符号，太坑了，官方也没有讲解怎么使用。 ?...(默认的是Meta + I ,windows上没有这个快捷键，我就改成了Alt + I, 点击菜单栏File -> Settinigs -> Keymap -> 搜索Translate - > 右键 add

1.5K2 0

android 中 vector 的用法，坑，怎么替代，关于这几方面的一些看法

---- 首先，去哪找合适的矢量图：阿里巴巴UX矢量库传送门找到你需要的图标，并下载svg 在android中打开vector assert 点击Local SVG 选择路径，并命名...嗯，到了这一步，我们已经可以自由的使用矢量图标了呢，那怎么改变图标颜色呢？...(ColorStateList.valueOf(Color.RED));//设置状态性的，比如点击一个颜色，未点击一个颜色 DrawableCompat.setTint(a,Color.RED); /...---- 总结一下，这个矢量图的缺点吧： 1.麻烦，需要下载->vector asset转换->用在非imageview中还要再写一个xml包裹起来才可用 2.不能随心所欲的在xml布局中任意切换图标颜色...后面要介绍的 iconfont 它的原理是，把你想要的矢量图标打包成一个ttf，在android中应用这个ttf,就可以随心所欲了，怎么个随心所欲？

1.1K3 0

Vue这些修饰符帮我节省20%的开发时间

但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。...像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景...鼠标按钮修饰符刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符 .left 左键点击 .right...右键点击 .middle 中键点击 ok 键值修饰符其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。...比如onkeyup，onkeydown啊 .keyCode 如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表

1.1K0 0

如何使用SVG动画来制作游戏

我们立即开始着手设计，讨论了所有的细节动画后（试着画出来并且配以音效），我便开始进行游戏开发。如何玩: 来回弹跳的球是可以改变颜色的。...你必须随时观察球当前的颜色，并且在球和柱子相接触的一瞬间，确保两者的颜色是一样的。点击柱子可以改变它的颜色，单击变红，双击变黄，三击则变为紫色。...https://ihatetomatoes.net/get-greensock-101/ 背景动画几乎所有你能在背景上看到的东西都是用SVG制作的。...一旦你开始使用了弹性盒子，你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。 ?...如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。

2.1K3 0

制作一个简单的绘图软件(让人头大的JAVA期末作业)

预习开始：我遇到的第一个难题就是：菜单栏的菜单Start的子菜单DrawLine下还有子菜单DrawLineA,DrawLineB,DrawLineC，如何通过代码来实现。...接着我发现DrawLine菜单下应该是三个单选按钮，而不是像我的上图那样，于是我遇到了第二个难题，怎么设置复选框和单选按钮组，并且每次只允许选择一个按钮呢？单选按钮又如何添加监听事件呢？...预习的第七部分是如何在点击Circle、Matrix、Line、Eraser(才发现我上面写的是eraser，首字母忘记大写了)这些工具栏按钮后，出现相应的画图功能？预习的第七个知识点是在教材上。...看下画椭圆、画矩阵、画直线和橡皮擦的效果： ? ? 预习的第八部分是如何添加颜色选择器来改变画笔的颜色？...代码会在期末结束的时候更新在该博客和GitHub上

2.3K1 0

创意卡片式项目管理界面UI设计源码

该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息。...该项目管理界面还提供了一个全屏的导航菜单，用户可以通过右上角的汉堡包图标来触发全屏菜单。 ?...），而它的伪元素.cd-title::before被设置为300%，实际是等于视口的高度。...它的::before伪元素是一个空白占位，它等于屏幕视口的宽度和高度，它的作用是让项目图片开始时可以全屏显示，而不是被content-wrapper的内容覆盖。...当用户点击了.cd-nav-trigger按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。

1.6K2 0

Vue笔记(10) vue-router

main.js 最基本的结构就是这样的那么现在就要创建路由组件,到时候才可以让路径和路由对应起来我在scr下的components文件夹下创建两个文件我写了两个,一个主页(...Home)页面的一个关于(About)页面的那设置好这些该怎么使用呢?...因为浏览器不知道我们什么时候使用哪个路由.所以我们还需要使用不同的标签,使我们的URL能发生改变 router-link用于显示标签和内容 router-view决定渲染时的位置,用于占位 App.vue...时,会使用到该类但是通常不会修改类的属性,会直接使用默认的router-link-active即可它的需求可能是这种: 点击了哪个按钮,就给哪个按钮变个颜色现在给这个类添加样式:...id,那么应该怎么实现这种动态路由呢?

8751 0

iOS开发常用之网络

RDVTabBarController - 一个TabBar组件，可以方便设置底部菜单的文字图片，点击效果，小红点提示等。...Rainbow - 旨在提高代码可读性和易用性的UIColor扩展，它使原先有限的预定义颜色（方法）选择，扩展至超过1200种。...Form - JSON驱动的Form表单系统，复杂的表单填写类App极其需要（比如淘宝呢！）。...SwiftyFORM - swift表单输入框架（亮点是表单验证规则引擎），是我见过地最易用的Swift表单组件。...侧滑与右滑返回手势 SloppySwiper - iOS系统自带的UINavigationController要7.0才支持，但不过该手势只能从屏幕左侧边缘识别，如果要扩大到整个屏幕范围怎么办？

23.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭