当屏幕足够小时，我有一个汉堡菜单，但它根本不像按钮那样反应，更像是图像。我将它与此处找到的其他代码片段和其他解决方案进行了比较，但我找不到解决方案。我已经添加了我目前拥有的代码。我提供了 HTML（第一部分）、css（第二部分）和 Javascript（第三部分）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charsets="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal projects Website | Chris McClure</title>
<!-- ----BOX ICONS---- -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- ----CUSTOM CSS---- -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<a href="#" class="logo">projects</a>
<i class='bx bx-menu' id="menu-icon"></i>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About Me</a>
<a href="#education">Education</a>
<a href="#projects">projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- ----HOME SECTION DESIGN---- -->
<section class="home" id="home">
<div class="home-content">
<h3>Hello, It's Me</h3>
<h1>Chris McClure</h1>
<h3>And I'm a <span class="multiple-text"></span></h3>
<p>I have had a wide range of experiences. I am also drawn to learning about new innovative tech</p>
<div class="social-media">
<a href="#"><i class='bx bxl-linkedin-square'></i></a>
<a href="#"><i class='bx bxl-github' ></i></a>
</div>
<a href="#" class="btn">Download CV</a>
</div>
<div class="home-img">
<img src="/images/Logo-face.jpg" alt="">
</div>
</section>
<!-- ---- ABOUT SECTION---- -->
<section class="about" id="about">
<div class="about-img">
<img src="images/Me.jpg" alt="">
</div>
<div class="about-content">
<h2 class="heading">About <span>Me</span></h2>
<h3>Systems Engineer/Software Testing/Security Analyst/IT Enthusiast</h3>
<p>I am the type of person always looking to learn something new, improve my own skills and expand them.</p>
<a href="#" class="btn">Read More</a>
</div>
</section>
<!-- ----EDUCATION SECTION---- -->
<section class="education" id="education">
<h2 class="heading">My <span>Education</span></h2>
<div class="education-container">
<div class="education-box">
<i class='bx bx-water' ></i>
<h3>Systems Engineer</h3>
<p>Providing support for a 24/7 control room that monitors water dams and wind farms to generate electricity</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="education-box">
<i class='bx bx-desktop'></i>
<h3>Hardware Tester/Agency Worker</h3>
<p>testing the functionality and integrity of a variety of tech from TV's, phones, laptops, PC's and much more for an auction house.</p>
<a href="#" class="btn">Read More</a>
</div>
<div class="education-box">
<i class='bx bxs-pizza' ></i>
<h3>Delivery Driver</h3>
<p>Delivering pizza was the main part of the role while also supporting those in the shop with packaging food and cleaning the shop.</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
</section>
<!-- ----projects SECTION---- -->
<section class="projects" id="projects">
<h2 class="heading">Latest <span>Project</span></h2>
<div class="projects-container">
<div class="projects-box">
<img src="images/Webscraper-git.png" alt="">
<div class="projects-layer">
<h4>Python Web Scraper</h4>
<p>program to scrape data from the Marvel website</p>
<a href="#"><i class='bx bxl-python' ></i></a>
</div>
</div>
<div class="projects-box">
<img src="images/marvel-website.png" alt="">
<div class="projects-layer">
<h4>WIX Website Design</h4>
<p>MARVEL Fan Website</p>
<a href=""><i class='bx bxl-python' ></i></a>
</div>
</div>
<div class="projects-box">
<img src="images/first-website.png" alt="">
<div class="projects-layer">
<h4>First HTML Website</h4>
<p>First HTML Website built at University</p>
<a href=""><i class='bx bxl-python' ></i></a>
</div>
</div>
</div>
</section>
<!-- ----CONTACT SECTION---- -->
<section class="contact" id="contact">
<h2 class="heading">Contact <span>Me!</span></h2>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Full Name">
<input class="email" placeholder="Email Address">
</div>
<div class="input-box">
<input type="number" placeholder="Mobile Number">
<input type="text" placeholder="Email Subject">
</div>
<textarea name="" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
<input type="submit" value="Send Message" class="btn">
</form>
</section>
<!-- ----FOOTER SECTION---- -->
<footer class="footer">
<div class="footer-text">
<p>Copyright © 2023 by Chris | All Rights Reserved.</p>
</div>
<div class="footer-iconTop">
<a href="#home"><i class='bx bx-up-arrow-alt'></i></a>
</div>
</footer>
<!-- ----SCROLL REVEAL---- -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- ----TYPED JS---- -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script src="js/main.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
:root {
--bg-color: #1f242d;
--second-bg-color: #323946;
--text-color: #fff;
--main-color: #ff004f;
}
html {
font-size: 62.5%;
overflow-x: hidden;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
section {
min-height: 100vh;
padding: 10rem 9%;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2rem 9%;
background: var(--bg-color);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.header.sticky {
border-bottom: .1rem solid rgba(0, 0, 0, .2);
}
.logo {
font-size: 2.5rem;
color: var(--text-color);
font-weight: 600;
cursor: default;
}
.navbar a {
font-size: 1.7rem;
color: var(--text-color);
margin-left: 4rem;
transition: .3s;
}
.navbar a:hover, .navbar a.active {
color: var(--main-color);
}
#menu-icon {
font-size: 3.6rem;
color: var(--text-color);
display: none;
}
.home {
display: flex;
justify-content: center;
align-items: center;
}
.home-img img {
width: 35vw;
animation: floatImage 4s ease-in-out infinite;
}
@keyframes floatImage {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-2.4);
}
100% {
transform: translateY(0);
}
}
.home-content h3 {
font-size: 3.2rem;
font-weight: 700;
}
.home-content h3:nth-of-type(2) {
margin-bottom: 2rem;
}
span {
color: var(--main-color);
}
.home-content h1 {
font-size: 5.6rem;
font-weight: 700;
line-height: 1.3;
}
.home-content p {
font-size: 1.6rem;
}
.social-media a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
background: transparent;
border: .2rem solid var(--main-color);
border-radius: 50%;
font-size: 2rem;
color: var(--main-color);
margin: 3rem 1.5rem 3rem 0;
transition: .5s ease;
}
.social-media a:hover {
background: var(--main-color);
color: var(--second-bg-color);
box-shadow: 0 0 1rem var(--main-color);
}
.btn {
display: inline-block;
padding: 1rem 2.8rem;
background: var(--main-color);
border-radius: 4rem;
box-shadow: 0 0 1rem var(--main-color);
font-size: 1.6rem;
color: var(--second-bg-color);
letter-spacing: .1rem;
font-weight: 600;
transition: .5s ease;
}
.btn:hover {
box-shadow: none;
}
.about{
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
background: ver(--second-bg-color);
}
.about-img img{
width: 35vw;
}
.heading {
text-align: center;
font-size: 4.5rem;
}
.about-content h2 {
text-align: left;
line-height: 1.2;
}
.about-content h3 {
font-size: 2.6rem;
}
.about-content p {
font-size: 1.6rem;
margin: 2rem 0 3rem;
}
.education h2 {
margin-bottom: 5rem;
}
.education-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.education-container .education-box {
flex: 1 1 30rem;
background: var(--second-bg-color);
padding: 3rem 2rem 4rem;
border-radius: 2rem;
text-align: center;
border: .2rem solid var(--bg-color);
transition: .5s ease;
}
.education-container, .education-box:hover {
border-color: var(--main-color);
transform: scale(1.02);
}
.education-box i {
font-size: 7rem;
color: var(--main-color);
}
.education-box h3 {
font-size: 2.6rem;
}
.education-box p {
font-size: 1.6rem;
margin: 1rem 0 3rem;
}
.projects {
background: var(--second-bg-color);
}
.projects h2 {
margin-bottom: 4rem;
}
.projects-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 2.5rem;
}
.projects-container, .projects-box {
position: relative;
border-radius: 2rem;
box-shadow: 0 0 1rem var(--bg-color);
overflow: hidden;
display: block;
}
.projects-box img {
width: 100%;
transition: .5s ease;
}
.projects-box:hover img {
transform: scale(.8);
}
.projects-box .projects-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, .2), var(--main-color));
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding: 0 4rem;
transform: translateY(100%);
transition: .5s ease;
}
.projects-box:hover .projects-layer {
transform: translateY(0);
}
.projects-layer h4 {
font-size: 3rem;
}
.projects-layer p {
font-size: 1.6rem;
margin: .3rem 0 1rem;
}
.projects-layer a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 5rem;
height: 5rem;
background: var(--text-color);
border-radius: 50%;
}
.projects-layer a i {
font-size: 2rem;
color: var(--second-bg-color);
}
.contact h2 {
margin-bottom: 3rem;
}
.contact form {
max-width: 70rem;
margin: 1rem auto;
text-align: center;
margin-bottom: 3rem;
}
.contact form .input-box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact form .input-box input,
.contact form textarea {
width: 100%;
padding: 1.5rem;
font-size: 1.6rem;
color: var(--text-color);
background: var(--second-bg-color);
border-radius: .8rem;
margin: .7rem 0;
}
.contact form .input-box input {
width: 49%;
}
.contact form textarea {
resize: none;
}
.contact form .btn {
margin-top: 2rem;
cursor: pointer;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 2rem 9%;
background: var(--second-bg-color);
}
.footer-text p {
font-size: 1.6rem;
}
.footer-iconTop a {
display: inline-flex;
justify-content: center;
align-items: center;
padding: .8rem;
background: var(--main-color);
border-radius: .8rem;
transition: 0.5s ease;
}
.footer-iconTop a:hover {
box-shadow: 0 0 1rem var(--main-color);
}
.footer-iconTop a i {
font-size: 2.4rem;
color: var(--second-bg-color);
}
/* ----BREAKPOINTS---- */
@media (max-width: 1200px) {
html {
font-size: 55%;
}
}
@media (max-width: 991px) {
.header {
padding: 2rem 3%;
}
section {
padding: 10rem 3% 2rem;
}
.education {
padding-bottom: 7rem;
}
.education {
padding-bottom: 7rem;
}
.contact{
min-height: auto;
}
.footer {
padding: 2rem 3%;
}
}
@media (max-width: 768px) {
#menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 1rem 3%;
background: var(--bg-color);
border-top: .1rem solid rgba(0, 0, 0, .2);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
display: none;
}
.navbar.active {
display: block;
}
.navbar a {
display: block;
font-size: 2rem;
margin: 3rem 0;
}
.home {
flex-direction: column;
}
.home-content h3 {
font-size: 2.6rem;
}
.home-content h1 {
font-size: 5rem;
}
.home-img img {
width: 70vw;
margin-top: 4rem;
}
.about {
flex-direction: column-reverse;
}
.about-img {
width: 70vw;
margin-top: 4rem;
}
.education h2 {
margin-bottom: 3rem;
}
.education h2 {
margin-bottom: 3rem;
}
.education-container {
grid-template-columns: repeat(2, 1f);
}
}
@media (max-width: 617px){
.education-container {
grid-template-columns: 1fr;
}
}
@media (max-width:450px) {
html {
font-size: 50%;
}
.contact form .input-box input {
width: 100%;
}
}
@media (max-width: 365px) {
.home-img img {
width: 90vw;
}
.about-img img {
width: 90vw;
}
.footer {
flex-direction: column-reverse;
}
.footer p {
text-align: center;
margin-top: 2rem;
}
}
/* ----SCROLL SECTION ACTIVE LINK---- */
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');
window.onscroll = () => {
sections.forEach(sec => {
let top = window.scrollY;
let offset = sec.offsetTop - 150;
let height = sec.offsetHeight;
let id = sec.getAttribute('id');
if(top >= offset && top < offset + height) {
navLinks.forEach(links => {
links.classList.remove('active');
document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
});
};
});
/* ----STICKY NAVBAR---- */
let header = document.querySelector('header');
header.classList.toggle('sticky', window.scrollY > 100);
/* ----REMOVE TOGGLE ICON AND NAVBAR WHEN CLICK NAVBAR LINK (SCROLL)---- */
menuIcon.classList.remove('bx-x');
navbar.classList.remove('active');
};
/* ----SCROLL REVEAL---- */
ScrollReveal({
reset: true,
distance: '80px',
duration: 2000,
delay: 200
});
ScrollReveal().reveal('.home-content, .heading', { origin: 'top' });
ScrollReveal().reveal('.home-img, .education, .container, .portfolio-box, .contact form', { origin: 'bottom' });
ScrollReveal().reveal('.home-content h1, .about-img', { origin: 'left' });
ScrollReveal().reveal('.home-content p, .about-content', { origin: 'right' });
/* ----TYPED JS---- */
const typed = new Typed('.multiple-text', {
strings: ['Systems Engineer', 'IT Enthusiast'],
typeSpeed: 100,
backSpeed: 100,
backDelay: 1000,
loop: true
});
/* ----TOGGLE ICON NAVBAR---- */
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
MenuIcon.onclick = () => {
menuIcon.classList.toggle('bx-x');
navbar.classList.toggle('active');
};
因为你用小写字母定义它，而你用大写字母称呼它
错误：
let menuIcon ... MenuIcon.onclick
正确：
let MenuIcon ... MenuIcon.onclick