[英]change color of burger menu depending on the background of the section
我正在制作一个hamburger menu
作为一个组件并固定它具有fixed
属性,这具有菜单特征的三行这些是白色我需要的是当它在白色的部分时它变为黑色,即使我占用了将文本与背景进行对比的方法,但它不起作用,因为要使其工作, bg
必须位于组件的父div
中,而不是我发送它来调用它的位置,所以如果有人可以帮助我如何制作它改变颜色,或者如果已经有一些汉堡包的npm
改变了bg
颜色。
此外,有必要考虑到在每个不同的页面中它都有不同的bg
并且在我命令的所有页面中将nav
作为组件调用。
这将是我在带有typescript
nextjs
占据的菜单上的代码
import { StyledHamburger } from "./Hamburger.styled";
export type Props = {
open: boolean;
setOpen: (v: boolean) => void;
};
const Hamburger = (props: Props) => (
<StyledHamburger open={props.open} onClick={() => props.setOpen(!props.open)}>
<div />
<div />
<div />
</StyledHamburger>
);
export default Hamburger;
款式:
import styled from "styled-components";
import { colors } from "../global";
export const StyledHamburger = styled.button<{ open: boolean }>`
position: fixed;
width: 2rem;
height: 2rem;
padding: 0;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border: none;
cursor: pointer;
outline: none;
z-index: 2;
div {
position: relative;
width: 2rem;
height: 0.25rem;
border-radius: 0px;
transition: all 0.3s linear;
transform-origin: 1px;
background-color: ${({ open }) =>
open ? colors.pearl : colors.pearl};
:first-child {
transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
}
:nth-child(2) {
opacity: ${({ open }) => (open ? "0" : "1")};
transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
}
:nth-child(3) {
transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
}
}
p {
position: relative;
border-radius: 0px;
transition: all 0.3s linear;
transform-origin: 1px;
background-color: ${({ open }) =>
open ? colors.pearl : colors.pearl};
transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
}
`;
我不确定是否有一个简单的解决方案来检查元素的背景并进行更改。
我会使用交叉点观察器来检查每个部分及其背景颜色。 然后将正确的样式应用到汉堡包元素。 它不像您所说的自动对比工具那样自动化,但应该很容易控制和使用。
如果每个汉堡包菜单都位于具有不同背景的自己的页面上,您可以使用 CSS 为每页菜单设置样式。 您可以做的是为每个页面分配一个附加到正文的 id,然后在 CSS 中调用该 ID 和汉堡菜单来设置它的样式。
例子:
<body id="homepage">
<nav class="hamburger">
</body>
对于第 2 页:
<body id="about-us">
<nav class="hamburger">
</body>
然后在 CSS 中:
#homepage .hamburger {
your styles
}
#about-us .hamburger {
your styles
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.