我有一个带有响应式导航栏的主页。当您缩小窗口大小时,它会折叠成一个适用于移动设备/平板电脑的汉堡,然后在页面右侧垂直向下显示菜单选项。
主页还有一个自动运行的图片幻灯片,位于页面中央。
当窗口大小减小到移动设备大小并折叠成汉堡时,我在图片幻灯片上看不到某些菜单选项。关于如何实现这一点的任何想法?我是 HTML、CSS 和 JS 的新手……非常感谢任何帮助(:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/style.css" rel = "stylesheet" type="text/css" >
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<script> src="app.js"</script>
<title>Rogue Concept</title>
</head>
<body>
<!-- Navigation Menu Bar-->
<nav>
<div class="logo">
<h4>Rogue Concept</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Restoration</a>
</li>
<li>
<a href="#">Hire</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<!--image slider start-->
<div class="slider">
<div class="slides">
<!--radio buttons start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!--radio buttons end-->
<!--slide images start-->
<div class="slide first">
<img src="assets/img/grant-ritchie-j0YPbvXu4t0-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/grant-ritchie-jYk96oRbPwg-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jan-de-keijzer-8eudveAaeFU-unsplash.jpeg" alt="" class="center">
</div>
<div class="slide">
<img src="assets/img/jon-flobrant-lRSChvh1Mhs-unsplash.jpeg" alt="" class="center">
</div>
<!--slide images end-->
<!--automatic navigation start-->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!--automatic navigation end-->
</div>
<!--manual navigation start-->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!--manual navigation end-->
</div>
<!--image slider end-->
<script src="assets/app.js"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* Navigation Tool Bar Start */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: whitesmoke;
font-family: 'Oswald', sans-serif;
}
.logo {
color: black;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
/* Navigation Tool Bar End */
/* Mobile Nav Tool Bar Start */
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color : black;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: whitesmoke;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
.nav-active {
transform: translateX(0%);
}
}
/* Mobile Nav Tool Bar End */
/* Animation Start */
@keyframes navLinkFade{
from{
opacity: 0;
transfrom: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg)translate(-5px,-6px);
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input{
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/*css for manual slide navigation*/
.navigation-manual {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}
.manual-btn:not(:last-child) {
margin-right: 40px;
}
.manual-btn:hover {
background: whitesmoke;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation*/
.navigation-auto {
position: absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid whitesmoke;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child) {
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: whitesmoke;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: whitesmoke;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: whitesmoke;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: whitesmoke;
}
app.js
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click',() => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();