[英]How can I make this nav bar thinner and the background color transparent
代碼: https : //codesandbox.io/s/goofy-boyd-xscgd
現場演示: https : //xscgd.csb.app/
我在頁面上有一個導航欄,當您在頁面上向上滾動時,它將顯示出來。
該組件的代碼是
import React, { Component } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import AnchorLink from "react-anchor-link-smooth-scroll";
import { navLinks, navHeight } from "./config";
import Menu from "./Menu";
import styled from "styled-components";
import theme from "../styles/theme";
import media from "../styles/media";
import mixins from "../styles/mixins";
const { colors, fontSizes, fonts } = theme;
const throttle = (func, wait = 100) => {
let timer = null;
return function(...args) {
if (timer === null) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, wait);
}
};
};
const NavContainer = styled.header`
${mixins.flexBetween};
position: fixed;
top: 0;
padding: 0px 50px;
background-color: ${colors.navy};
transition: ${theme.transition};
z-index: 11;
filter: none !important;
pointer-events: auto !important;
user-select: auto !important;
width: 100%;
height: ${props =>
props.scrollDirection === "none" ? theme.navHeight : theme.navScrollHeight};
box-shadow: ${props =>
props.scrollDirection === "up"
? `0 10px 30px -10px ${colors.shadowNavy}`
: "none"};
transform: translateY(
${props =>
props.scrollDirection === "down" ? `-${theme.navScrollHeight}` : "0px"}
);
${media.desktop`padding: 0 40px;`};
${media.tablet`padding: 0 25px;`};
`;
const Navbar = styled.nav`
${mixins.flexBetween};
position: relative;
width: 100%;
color: ${colors.lightestSlate};
font-family: ${fonts.SFMono};
counter-reset: item 0;
z-index: 12;
`;
const Logo = styled.div`
${mixins.flexCenter};
`;
const LogoLink = styled.a`
display: block;
color: ${colors.green};
width: 42px;
height: 42px;
&:hover,
&:focus {
svg {
fill: ${colors.transGreen};
}
}
svg {
fill: none;
transition: ${theme.transition};
user-select: none;
}
`;
const Hamburger = styled.div`
${mixins.flexCenter};
overflow: visible;
margin: 0 -12px 0 0;
padding: 15px;
cursor: pointer;
transition-timing-function: linear;
transition-duration: 0.15s;
transition-property: opacity, filter;
text-transform: none;
color: inherit;
border: 0;
background-color: transparent;
display: none;
${media.tablet`display: flex;`};
`;
const HamburgerBox = styled.div`
position: relative;
display: inline-block;
width: ${theme.hamburgerWidth}px;
height: 24px;
`;
const HamburgerInner = styled.div`
background-color: ${colors.green};
position: absolute;
width: ${theme.hamburgerWidth}px;
height: 2px;
border-radius: ${theme.borderRadius};
top: 50%;
left: 0;
right: 0;
transition-duration: 0.22s;
transition-property: transform;
transition-delay: ${props => (props.menuOpen ? `0.12s` : `0s`)};
transform: rotate(${props => (props.menuOpen ? `225deg` : `0deg`)});
transition-timing-function: cubic-bezier(
${props =>
props.menuOpen ? `0.215, 0.61, 0.355, 1` : `0.55, 0.055, 0.675, 0.19`}
);
&:before,
&:after {
content: "";
display: block;
background-color: ${colors.green};
position: absolute;
left: auto;
right: 0;
width: ${theme.hamburgerWidth}px;
height: 2px;
transition-timing-function: ease;
transition-duration: 0.15s;
transition-property: transform;
border-radius: 4px;
}
&:before {
width: ${props => (props.menuOpen ? `100%` : `120%`)};
top: ${props => (props.menuOpen ? `0` : `-10px`)};
opacity: ${props => (props.menuOpen ? 0 : 1)};
transition: ${props =>
props.menuOpen ? theme.hamBeforeActive : theme.hamBefore};
}
&:after {
width: ${props => (props.menuOpen ? `100%` : `80%`)};
bottom: ${props => (props.menuOpen ? `0` : `-10px`)};
transform: rotate(${props => (props.menuOpen ? `-90deg` : `0`)});
transition: ${props =>
props.menuOpen ? theme.hamAfterActive : theme.hamAfter};
}
`;
const NavLinks = styled.div`
display: flex;
align-items: center;
${media.tablet`display: none;`};
`;
const NavList = styled.ol`
div {
${mixins.flexBetween};
}
`;
const NavListItem = styled.li`
margin: 0 10px;
position: relative;
font-size: ${fontSizes.smallish};
counter-increment: item 1;
&:before {
content: "0" counter(item) ".";
text-align: right;
color: ${colors.green};
font-size: ${fontSizes.xsmall};
}
`;
const NavLink = styled(AnchorLink)`
padding: 12px 10px;
`;
const ResumeLink = styled.a`
${mixins.smallButton};
margin-left: 10px;
font-size: ${fontSizes.smallish};
`;
const DELTA = 5;
class Nav extends Component {
state = {
isMounted: false,
menuOpen: false,
scrollDirection: "none",
lastScrollTop: 0
};
componentDidMount() {
setTimeout(() => this.setState({ isMounted: true }), 100);
window.addEventListener("scroll", () => throttle(this.handleScroll()));
window.addEventListener("resize", () => throttle(this.handleResize()));
window.addEventListener("keydown", e => this.handleKeydown(e));
}
componentWillUnmount() {
this.setState({ isMounted: false });
window.removeEventListener("scroll", () => this.handleScroll());
window.removeEventListener("resize", () => this.handleResize());
window.removeEventListener("keydown", e => this.handleKeydown(e));
}
toggleMenu = () => this.setState({ menuOpen: !this.state.menuOpen });
handleScroll = () => {
const { isMounted, menuOpen, scrollDirection, lastScrollTop } = this.state;
const fromTop = window.scrollY;
// Make sure they scroll more than DELTA
if (!isMounted || Math.abs(lastScrollTop - fromTop) <= DELTA || menuOpen) {
return;
}
if (fromTop < DELTA) {
this.setState({ scrollDirection: "none" });
} else if (fromTop > lastScrollTop && fromTop > navHeight) {
if (scrollDirection !== "down") {
this.setState({ scrollDirection: "down" });
}
} else if (fromTop + window.innerHeight < document.body.scrollHeight) {
if (scrollDirection !== "up") {
this.setState({ scrollDirection: "up" });
}
}
this.setState({ lastScrollTop: fromTop });
};
handleResize = () => {
if (window.innerWidth > 768 && this.state.menuOpen) {
this.toggleMenu();
}
};
handleKeydown = e => {
if (!this.state.menuOpen) {
return;
}
if (e.which === 27 || e.key === "Escape") {
this.toggleMenu();
}
};
render() {
const { isMounted, menuOpen, scrollDirection } = this.state;
return (
<NavContainer scrollDirection={scrollDirection}>
<Navbar>
<TransitionGroup>
{isMounted && (
<CSSTransition classNames="fade" timeout={3000}>
<Hamburger onClick={this.toggleMenu}>
<HamburgerBox>
<HamburgerInner menuOpen={menuOpen} />
</HamburgerBox>
</Hamburger>
</CSSTransition>
)}
</TransitionGroup>
<NavLinks>
<NavList>
<TransitionGroup>
{isMounted &&
navLinks &&
navLinks.map(({ url, name }, i) => (
<CSSTransition key={i} classNames="fadedown" timeout={3000}>
<NavListItem
key={i}
style={{ transitionDelay: `${i * 100}ms` }}
>
<NavLink href={url}>{name}</NavLink>
</NavListItem>
</CSSTransition>
))}
</TransitionGroup>
</NavList>
<TransitionGroup>
{isMounted && (
<CSSTransition classNames="fadedown" timeout={3000}>
<div style={{ transitionDelay: `600ms` }}>
<ResumeLink
href="/resume.pdf"
target="_blank"
rel="nofollow noopener noreferrer"
>
Resume
</ResumeLink>
</div>
</CSSTransition>
)}
</TransitionGroup>
</NavLinks>
</Navbar>
<Menu menuOpen={menuOpen} toggleMenu={this.toggleMenu} />
</NavContainer>
);
}
}
export default Nav;
問題確實很簡單。
如您所見, 通過移動設備查看頁面時,頂部會出現一個導航欄。 我真的想使它更薄(或更短),並使其背景透明。 但是我試圖找到我應該在哪里更改代碼,但我沒有。 我不太擅長CSS,希望有人指出我應該更改的代碼部分以解決此問題。
請注意,我只想更改移動設備的導航欄。
您需要像這樣在樣式化的NavContainer
上添加斷點:
const NavContainer = styled.header`
${mixins.flexBetween};
position: fixed;
top: 0;
padding: 0px 50px;
background-color: ${colors.navy};
transition: ${theme.transition};
z-index: 11;
filter: none !important;
pointer-events: auto !important;
user-select: auto !important;
width: 100%;
height: ${props =>
props.scrollDirection === "none" ? theme.navHeight : theme.navScrollHeight};
box-shadow: ${props =>
props.scrollDirection === "up"
? `0 10px 30px -10px ${colors.shadowNavy}`
: "none"};
transform: translateY(
${props =>
props.scrollDirection === "down" ? `-${theme.navScrollHeight}` : "0px"}
);
${media.desktop`padding: 0 40px;`};
${media.tablet`padding: 0 25px;`};
@media (max-width: 768px) {
background-color: rgba(255,255,255,0.5);
height: auto;
}
`;
好像您在尋找媒體查詢。
在您創建變量以存儲樣式的方式中,ReactJS似乎不支持它們,但是有一個庫可讓您使用媒體查詢。
參見-https://github.com/ReactTraining/react-media
有關一般媒體查詢的更多信息,請參見-https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
本質上,您要查看設備的寬度,然后根據該寬度指定樣式。 對確定客戶端是否正在使用移動設備非常有用。
您可以設置媒體查詢以檢查寬度<600px,然后根據該值將導航欄更改為透明且較薄。
希望以上幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.