我正在尝试建立我的第一个完全响应式网站,除此导航栏外,其他所有功能都应正常运行。导航栏应该具有您按下的“汉堡”按钮,然后弹出链接。问题是这些链接仅在我的主页上弹出,而在其他任何页面上都没有。
我已经尝试将导航栏的HTML代码从首页复制到其他页面,并且所有页面都使用相同的CSS代码。我认为问题一定在Javascript中,但是我对Java的经验不足,无法独自解决问题。
我还没有真正找到类似问题的人,所以我要问自己。
这是导航栏的代码:
HTML
<nav>
<div class="logo">
<a href="https://www.pwrgear.net"><img src="assets/images/pg-logo-white-250p.png" alt="White PWRGear Logo" title="Home"</a>
</div>
<ul class="nav-links">
<li><a href="assets/html/order.html">Order</a></li>
<li><a href="assets/html/reviews.html">Reviews</a></li>
<li><a href="assets/html/community.html">Community</a></li>
<li><a href="assets/html/contact.html">Contact</a></li>
<li><a href="assets/html/about.html">About</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="assets/js/script.js"></script>
CSS
/* Navigation Bar Start */
nav
{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #1f1f1f;
}
.nav-links
{
display: flex;
justify-content: space-around;
width: 60%;
margin-right: 15%;
}
.nav-links a
{
text-decoration: none;
color: white;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 17px;
font-weight: 300;
font-style: normal;
}
.nav-links a:hover
{
color: red;
}
.nav-links li
{
list-style: none;
}
.burger
{
display: none;
cursor: pointer;
}
.burger div
{
width: 28px;
height: 2px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1024px)
{
.nav-links
{
margin-right: 9%;
}
.imageheader
{
margin-top: 10%;
}
.imagetext
{
margin-top: 3%;
}
.header2
{
margin-top: 1%;
}
.subheader
{
margin-top: 2%;
margin-bottom: 1%;
font-size: 28px;
}
.subcontent
{
width: 70%;
margin-left: 15%;
font-size: 24px;
margin-top: 1%;
}
}
@media screen and (max-width:768px)
{
body
{
overflow-x: hidden;
}
.nav-links
{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #1f1f1f;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 0;
width: 100%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.logo
{
margin-left: 25%;
}
.nav-links li
{
opacity: 0;
}
.burger
{
display: block;
}
.imagetext
{
margin-top: -6%;
display: none;
}
.subheader
{
font-size: 24px;
margin-top: 7%;
margin-bottom: 2%;
}
.subcontent
{
font-size: 18px;
margin-left: 15%;
margin-right: 15%;
font-weight: lighter;
margin-top: 2%;
}
.imageheader
{
margin-top: 0%;
display: none;
}
}
@media screen and (max-width:375px)
{
.imagetext
{
display: none;
}
.imageheader
{
}
}
@media screen and (max-width:812px)
{
.imagetext
{
width: 90%;
margin-left: 10%;
margin-top: 20%;
}
.imageheader
{
width: 90%;
margin-top: 20%;
}
}
@media screen and (max-width:736px)
{
.imagetext
{
/* display: none; */
margin-top: 15%;
width: 90%;
margin-left: 10%;
}
.imageheader
{
/* display: none; */
margin-top: 17%;
width: 90%;
}
}
@media screen and (max-width:667px)
{
.imagetext
{
height: 0%;
width: 90%;
margin-left: 10%;
}
.imageheader
{
height: 5%;
width: 90%;
}
}
@media screen and (max-width:414px)
{
.imagetext
{
margin-top: -51%;
width: 90%;
margin-left: 10%;
font-size: 14px;
}
.imageheader
{
margin-top: -25%;
width: 90%;
font-size: 24px;
}
}
@media screen and (min-width:1366px)
{
.imagetext
{
margin-top: 0%;
width: 50%;
margin-left: 2%;
}
.subheader
{
margin-top: 2%;
margin-bottom: 2%;
}
.content1
{
width: 33.33%;
float: left;
}
.content2
{
width: 33.33%;
float: left;
}
.content3
{
width: 33.33%;
float: left;
}
}
@media screen and (max-width:1366px)
{
.contactimage
{
opacity: 0%;
}
}
@media screen and (min-width:1920px)
{
.subcontent
{
width: 80%;
margin-left: 10%;
margin-top: 1%;
margin-bottom: 5%;
}
}
.nav-active
{
transform: translateX(0%);
}
.imagetextremove
{
display: none;
}
@keyframes navLinkFade
{
from
{
opacity: 0;
transform: translateX(50px);
}
to
{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1
{
transform: rotate(-45deg) translate(-4px, 4px);
}
.toggle .line2
{
opacity: 0;
}
.toggle .line3
{
transform: rotate(45deg) translate(-6px, -6px);
}
/* Navigation Bar End */
JS
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
const imageHeader = document.querySelector('.imageheader');
const imageText = document.querySelector('.imagetext');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Toggle Image Text
imageHeader.classList.toggle('imagetextremove');
imageText.classList.toggle('imagetextremove');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ``;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.4}s`
}
//Burger Animation
burger.classList.toggle('toggle');
});
});
}
navSlide();
您是否在其他HTML页面中包含了script.js?
我已解决问题,似乎是imageHeader和imageText切换。由于我的所有页面上都没有这些类,因此脚本无法运行。因此,我删除了脚本的这一部分,它可以正常工作。