我正在尝试使用 YouTube 上的教程制作我的第一个网站,但我陷入困境。
在移动设备上,我希望我的菜单看起来像这样(红色背景的屏幕),但是当我单击该图标时,没有任何反应。
有人知道如何让它发挥作用吗?预先感谢您的帮助。
* {
margin: 0;
padding: 0;
font-family: 'Lora', serif;
}
.header {
/*overflow: hidden; */
min-height: 100vh;
width: 100%;
background-color: white;
background-position: center;
background-size: cover;
position: relative;
}
.logo {
position: absolute;
top: 0;
left: 0;
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #515675;
text-decoration: none;
font-size: 16px;
}
.nav-links ul li::after {
content: '';
width: 100%;
height: 2px;
background: #E3AAAF;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after {
background: #515675;
}
.text-box {
width: 90%;
color: #515675;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-size: 62px;
}
.text-box p {
margin: 10px 0 42px;
font-size: 16px;
color: #515675;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #515675;
border: 1px solid #515675;
padding: 12px 34px;
font-size: 16px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #E3AAAF;
background: #E3AAAF;
transition: 1s;
}
nav .fa-solid {
display: none;
}
@media(max-width: 700px) {
* {
overflow-x: hidden;
}
.text-box h1 {
font-size: 20px;
}
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: #515675;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
}
nav .fa-solid {
display: block;
color: #515675;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Beauty by Name </title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!--<link href="<link rel="preconnect" href="https://fonts.googleapis.com">-->
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!--<script src="https://kit.fontawesome.com/961cf6a213.js" crossorigin="anonymous"></script>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img class="logo" style="width: 200px;" src="images/logo.jpg" alt=""></a>
<div class="nav-links">
<i class="fa-solid fa-xmark"></i>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Offer</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<i class="fa-solid fa-bars"></i>
</nav>
<div class="text-box">
<h1>Beauty By YOUR Name</h1>
<p>We are dedicated to enhancing your natural charm, offering a range of tailored treatments and pampering experiences. <br> Step into our serene oasis and let us bring out your inner glow.</p>
<a href="" class="hero-btn">Contact us</a>
</div>
</section>
</body>
我已经找到解决办法了。我在代码中添加的内容:
html:
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuIcon = document.querySelector('.fa-bars');
const closeIcon = document.querySelector('.fa-xmark');
const navLinks = document.querySelector('.nav-links');
menuIcon.addEventListener('click', function() {
navLinks.classList.toggle('show');
});
closeIcon.addEventListener('click', function() {
navLinks.classList.remove('show');
});
});
</script>
CSS:
.show {
right: 0;}