Question

我正在使用移动菜单。这里的想法：显示屏小于700像素，用户可以单击bage顶部的菜单按钮打开菜单；此菜单的作用类似于下拉菜单。

我这里确实有一个大问题-它必须与CSS和Java脚本有关。你能帮忙吗？

这是我的代码：

const navSlide = () => {
	const burger = document.querySelector('.burger');
	const nav = document.querySelector('.nav-Links');
	const navLinks = document.querySelectorAll('.item');
						
	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();

	*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	
	body{
		background-color: black;
	}	
	nav{
		display: flex;
		justify-content: space-around;
		align-items: center;
		min-height: 8vh;
		background-color: white;
		font-family: 'Arial', sans-serif;
	}
	
	.nav-Links {
		display: flex;
		justify-content: space-around;
		width: 30%;
	} 
	
	
/*here has to be problem nr. 1*/	
	.item ul, .nav input[type="checkbox"] {
	display: none;
}
	#menu:checked ~ .multi-level, .item input:checked ~ ul {
	display: block;
}


	
	.arrow {
	width: 12px;
	height: 12px;
	vertical-align: middle;
	float: left;
	z-index: 0;
	margin: 17px 1em 0 2em;
}
.item input + .arrow {
	transform: rotate(-90deg);
	transition: 0.1s;
}


/*Styles*/
label:hover {
	cursor: pointer;
}

label {
	width: 100%;
	display: block;
	z-index: 4;
	position: relative;
	font-family: arial;
	font-size: 18px;
	font-weight: 500px;
	text-decoration: none;
	font-style: normal;
	letter-spacing: 2px;
	font-style: normal;
	text-transform: Uppercase;
	color: #000000;
	text-align: left;
	word-wrap: break-word;
	White-space: initial;
}
.nav ul, .nav li, label {
	line-height: 50px;
	margin: 0;
	padding: 0 2em;
	list-style: none;
	font-family: arial;
	font-size: 12px;
	font-weight: 400px;
	text-decoration: none;
	font-style: normal;
	letter-spacing: 0.6px;
	text-transform: normal;
	color: #5c5c5c;
	text-align: left;
	width: 100%;
}

.item ul {
	padding: 0 0.25em;
		list-style: none;
}

.nav li a {
	line-height: 50px;
	margin: 0;
	padding: 0 4em;
	list-style: none;
	text-decoration: none;
}


/* maybe here nr. 2*/

	.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: absolute;
			right: 0px;
			height: 92vh;
			top: 8vh;
			color: black;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 55%;
			transform: translateX(100%);
			transition: transform 0.5s ease-in;
		}
		.burger{
			display: block;
		}
	}
	.nav-active{
		transform: translateX(0%);
	}	

	@keyframes navLinkFade{
		from{
			opacity: 0;
			transform: translateX(50px);
		}
		to{
			opacity: 1;
			transform: translateX(0px);
		}
	}
	
	/*this is the toggle bar*/
	.toggle .line1 {
		transform: rotate(-45deg) translate(-5px,6px);
	}
	.toggle .line2 {
		opacity: 0;
	}
	.toggle .line3 {
		transform: rotate(45deg) translate(-5px,-6px);
	}

<body>
<nav>
<div class="burger">
	<div class="line1"></div>
	<div class="line2"></div>
	<div class="line3"></div>
</div>

<div class="nav-Links">
	
            <div class="item">
                <input type="checkbox" id="A"/>
                <img src="my-own-link-to-arrow-icon.png" 
				class="arrow"><label for="A">Shop Mens</label>
                <ul>
                    <li><a href="#">Jewelry</a></li>
                    <li><a href="#">Jackets</a></li>
                    <li><a href="#">Shirts</a></li>
                </ul>
            </div>
			
            <div class="item">
                <input type="checkbox" id="B"/>
                <img src="my-own-link-to-arrow-icon.png" 
class="arrow"><label for="B">Shop Womans</label>
                        <ul>
                            <li><a href="#">Jewelry</a></li>
                            <li><a href="#">Jackets</a></li>
                            <li><a href="#">Shirts</a></li>
                        </ul>	
                    </div></li>     
           
            <div class="item">
                <input type="checkbox" id="C"/>
                <img src="my-own-link-to-arrow-icon.png" class="arrow"><label for="C">Customer Service</label>
                
                <ul>
                    <li><a href="#">Legal Notice</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
	        <li><a href="#">Site map</a></li>
                </ul>
            </div>
	
	<div class="item">
                <input type="checkbox" id="D"/>
                <img src="my-own-link-to-arrow-icon.png" class="arrow"><label for="D">More</label>
                
                <ul>
                    <li><a href="#">Our Story</a></li>
	        <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">AGJ Insider</a></li>
                </ul>
            </div>

     </div>

</nav>
</body>

Answer 1

const navSlide = () => {
	const burger = document.querySelector('.burger');
	const nav = document.querySelector('.nav-Links');
	const navLinks = document.querySelectorAll('.item');
						
	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();

*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}
	
	body{
		background-color: black;
	}	
	nav{
		display: flex;
		justify-content: space-around;
		align-items: center;
		min-height: 8vh;
		background-color: white;
		font-family: 'Arial', sans-serif;
	}
	
	.nav-Links {
		display: flex;
		justify-content: space-around;
		width: 30%;
	} 
	
	
/*here has to be problem nr. 1*/	
	.item ul, .nav input[type="checkbox"] {
	display: none;
}
	#menu:checked ~ .multi-level, .item input:checked ~ ul {
	display: block;
}


	
	.arrow {
	width: 12px;
	height: 12px;
	vertical-align: middle;
	float: left;
	z-index: 0;
	margin: 17px 1em 0 2em;
}
.item input + .arrow {
	transform: rotate(-90deg);
	transition: 0.1s;
}


/*Styles*/
label:hover {
	cursor: pointer;
}

label {
	width: 100%;
	display: block;
	z-index: 4;
	position: relative;
	font-family: arial;
	font-size: 18px;
	font-weight: 500px;
	text-decoration: none;
	font-style: normal;
	letter-spacing: 2px;
	font-style: normal;
	text-transform: Uppercase;
	color: #000000;
	text-align: left;
	word-wrap: break-word;
	White-space: initial;
}
.nav ul, .nav li, label {
	line-height: 50px;
	margin: 0;
	padding: 0 2em;
	list-style: none;
	font-family: arial;
	font-size: 12px;
	font-weight: 400px;
	text-decoration: none;
	font-style: normal;
	letter-spacing: 0.6px;
	text-transform: normal;
	color: #5c5c5c;
	text-align: left;
	width: 100%;
}

.item ul {
	padding: 0 0.25em;
		list-style: none;
}

.nav li a {
	line-height: 50px;
	margin: 0;
	padding: 0 4em;
	list-style: none;
	text-decoration: none;
}


/* maybe here nr. 2*/

	.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;
/*       here i calculate this height 100vh - header height */
			height: calc(100vh - 29px);
			top: 8vh;
			color: black;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 55%;
			transform: translateX(100%);
			transition: transform 0.5s ease-in;
      overflow-y: auto;
		}
    .item {
        width: 100%;
        float: left;
    }
		.burger{
			display: block;
		}
	}
	.nav-active{
		transform: translateX(0%);
	}	

	@keyframes navLinkFade{
		from{
			opacity: 0;
			transform: translateX(50px);
		}
		to{
			opacity: 1;
			transform: translateX(0px);
		}
	}
	
	/*this is the toggle bar*/
	.toggle .line1 {
		transform: rotate(-45deg) translate(-5px,6px);
	}
	.toggle .line2 {
		opacity: 0;
	}
	.toggle .line3 {
		transform: rotate(45deg) translate(-5px,-6px);
	}

<body>
<nav>
<div class="burger">
	<div class="line1"></div>
	<div class="line2"></div>
	<div class="line3"></div>
</div>

<div class="nav-Links">
	
            <div class="item">
                <input type="checkbox" id="A"/>
                <img src="my-own-link-to-arrow-icon.png" 
				class="arrow"><label for="A">Shop Mens</label>
                <ul>
                    <li><a href="#">Jewelry</a></li>
                    <li><a href="#">Jackets</a></li>
                    <li><a href="#">Shirts</a></li>
                </ul>
            </div>
			
            <div class="item">
                <input type="checkbox" id="B"/>
                <img src="my-own-link-to-arrow-icon.png" 
class="arrow"><label for="B">Shop Womans</label>
                        <ul>
                            <li><a href="#">Jewelry</a></li>
                            <li><a href="#">Jackets</a></li>
                            <li><a href="#">Shirts</a></li>
                        </ul>	
                    </div></li>     
           
            <div class="item">
                <input type="checkbox" id="C"/>
                <img src="my-own-link-to-arrow-icon.png" class="arrow"><label for="C">Customer Service</label>
                
                <ul>
                    <li><a href="#">Legal Notice</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
	        <li><a href="#">Site map</a></li>
                </ul>
            </div>
	
	<div class="item">
                <input type="checkbox" id="D"/>
                <img src="my-own-link-to-arrow-icon.png" class="arrow"><label for="D">More</label>
                
                <ul>
                    <li><a href="#">Our Story</a></li>
	        <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">AGJ Insider</a></li>
                </ul>
            </div>

     </div>

</nav>
</body>

检查此解决方案，您.item遇到了问题

您能找到CSS问题吗？移动切换菜单

1 个答案: