我是一名新开发人员,正在寻求指导。
我想在较小的屏幕上使用汉堡菜单进行导航,并使用以下 CSS 在汉堡菜单打开时隐藏水平导航栏链接。一切在本地运行良好,但是当我部署到 gh-pages 时,汉堡菜单和水平导航栏链接都出现在较小的屏幕上。谁能帮我找出问题所在吗?
这是我的 .jsx 文件:
import { Link } from 'react-router-dom';
import { useLocation } from "react-router-dom";
import React, { useState } from 'react';
import logo from '../../images/logo.png';
import name from '../../images/name.png';
import "./NavBar.css"
export default function NavBar() {
const location = useLocation();
const [menuOpen, setMenuOpen] = useState(false);
const toggleMenu = () => {
setMenuOpen(!menuOpen);
};
const closeMenu = () => {
setMenuOpen(false)
}
const activeLinkClass = function(path) {
if (location.pathname === path) {
return 'active-nav-links'
}
else if (location.pathname.slice(0,12) === path ) {
return 'active-nav-links'
}
else if (location.pathname.slice(0,7) === path) {
return 'active-nav-links'
}
else {
return 'nav-links'
}
};
return (
<div className={`nav-container ${menuOpen ? 'menu-open' : 'menu-close'}`}>
<div className="menu-button" onClick={toggleMenu}>
<div className={`menu-bar ${menuOpen ? 'open' : ''}`} />
<div className={`menu-bar ${menuOpen ? 'open' : ''}`} />
<div className={`menu-bar ${menuOpen ? 'open' : ''}`} />
</div>
<div className='nav-links' id="navLogo">
<Link to="/" onClick={closeMenu}><img src={name} /></Link>
</div>
<div className={activeLinkClass('/about')}>
<Link to="/about" onClick={closeMenu}>about</Link>
</div>
{/* <div className={activeLinkClass('/credits')}>
<Link to="/credits" onClick={closeMenu}>credits</Link>
</div> */}
<div className={activeLinkClass('/equipment')}>
<Link to="/equipment" onClick={closeMenu}>equipment</Link>
</div>
<div className={activeLinkClass('/work')}>
<Link to="/work" onClick={closeMenu}>work</Link>
</div>
<div className={activeLinkClass('/contact')}>
<Link to="/contact" onClick={closeMenu}>contact</Link>
</div>
</div>
);
}
这是我的.css 文件:
.nav-container {
display: flex;
justify-content: center;
align-items: center;
height: 8vh;
width: 100%;
background-color: var(--secondary);
margin-top: 2%;
border-bottom: 10px solid var(--primary);
z-index: 0;
overflow: hidden;
}
.nav-links {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100%;
width: 100%;
border-radius: 25px 25px 0 0;
font-size: small;
@media (max-width: 1024px) {
all: revert;
display: none;
}
}
.active-nav-links {
background-color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
border-radius: 25px 25px 0 0;
@media (max-width: 1024px) {
all: revert;
}
}
.active-nav-links > a {
color: var(--secondary);
font-size: larger;
@media (max-width: 1024px) {
color: var(--primary);
}
}
a > img {
height: 300px;
}
#navLogo {
@media (max-width: 1024px) {
height: 200px;
}
}
a {
color: var(--primary);
padding: 0;
text-decoration: none;
}
a:hover {
font-size: larger;
}
.menu-button {
display: none;
cursor: pointer;
padding: 10px;
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
@media (max-width: 1024px) {
display: block;
}
}
.menu-bar {
width: 25px;
height: 3px;
background-color: var(--primary);
margin: 4px 0;
transition: 0.4s;
z-index: 100;
}
.menu-open .menu-bar:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.menu-open .menu-bar:nth-child(2) {
opacity: 0;
}
.menu-open .menu-bar:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.menu-open .nav-links {
display: flex;
flex-direction: column;
}
.menu-open {
z-index: 1;
height: 100%;
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0;
flex-direction: column;
justify-content: flex-start;
background-color: var(--secondary);
animation: dropDown .3s ease-in;
}
@keyframes dropDown {
0% {
height: 10vh;
}
100% {
height: 100%;
}
}
.menu-open > .active-nav-links {
background-color: var(--primary);
border-radius: 5px;
width: 100%;
font-size: 10px;
}
.menu-open > .active-nav-links > a {
color: var(--secondary);
font-size: medium;
}
.menu-open > div > a:hover {
text-decoration: underline;
font-size: medium;
}
.menu-open > div:nth-child(3),
.menu-open > div:nth-child(4),
.menu-open > div:nth-child(5),
.menu-open > div:nth-child(6) {
padding: 40px;
}
以下是一些图片供参考 -
我尝试重构我的 CSS 并检查页面以查看正在应用哪些样式,但我不太确定我在看什么。
你的组件文件和 CSS 看起来都很好,我没有发现任何问题。
我的建议是尝试在本地构建生产版本并在本地运行生产版本,看看代码中是否有问题或者如果
gh-pages
无法正常工作,然后决定采取哪种方法。
以下是如何在本地构建和托管应用程序的生产版本 --
npm build
这将在 build/
目录中创建应用程序的生产版本。serve -s build
将使用位于 build/
目录中的应用程序启动一个简单的服务器。serve
,请运行 npm i -g serve
,然后重试。如果上述所有操作都正常,那么您可以按照本文档的第 7 步仔细检查是否正确使用
gh-pages
https://github.com/gitname/react-gh-pages#7-push -react-app 到 github-repository
如果没有任何效果,我建议提供一个指向您的存储库的链接,以便我们可以进一步帮助您解决您试图克服的挑战。
祝你好运!