JS функция навигации не работает при нажатии - PullRequest
Новая
       5

JS функция навигации не работает при нажатии

0 голосов
/ 21 февраля 2020

Я не большой кодер, но этот код работал для многих людей, и я часами пытался найти свою ошибку. когда я щелкаю меню гамбургера, меню слайдов вправо должно скользить в поле зрения и переходить от прозрачности 0 к непрозрачности 1. Все это вообще не происходит, что заставляет меня думать, что у меня ошибка js.

любая помощь будет отличной.

jsfiddle ниже 

const navSlide = () => {
	const burger = document.querySelector('.burger');
	const nav = document.querySelector('.nav-links')
	
	burger.addEventListener('click', ()=>{
			nav.classlist.toggle('nav-active');
	});
}

navSlide();
@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,400,600,700,900&display=swap');
* {
	margin: 0;
	padding:0;
	box-sizing:border-box;
}

.header {
	height: 2.5em;
	background-color:#7BC58A;
	position: sticky;
	top: 0;
	color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	font-size: .8rem;
	text-align: left;
	padding-left: 6em;
	padding-top: .4em;
	
	
}

.logo-image{
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin: 0 0em;
	
}

nav{
	display:flex;
	justify-content: space-around;
	align-items: center;
	min-height: 8vh;
	
}

.nav-links{
		display:flex;
		justify-content: space-around;
		width:45%;
	
}

.nav-links li{
	list-style: none;
}

.nav-links a{
	color:#5A5A5A; 
	font-size:.75em; 
	text-transform:uppercase; 
	text-decoration: none; 
	font-family: 'Raleway', sans-serif; 
	font-weight:600;
}

.nav-links a:hover{
	color:#7BC58A;
}

.nav-links a:active {
	color: #D1D1D1;
}

.burger{
	display: none;
	float:right;
	position: relative;
	top:0px;
}

.burger div{
	width:25px;
	height:3px;
	background-color:#5a5a5a;
	margin: 3px;
	border-radius: 40px;
	cursor: pointer;
	
}

@media screen and (max-width:1024px){
	.nav-links{
		width:55%;
	}
}


@media screen and (max-width:768px){
	body{
		overflow-x: hidden;
	}
	.nav-links{
		position: absolute;
		right: 0px;
		height:92vh;
		top: 8vh;
		background-color: #7BC58A;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		transform: translate(100%);
		
	}
	
	.nav-links li{
		opacity:1;
	}
	
	.burger{
		display:block;
	}
}
.nav-active{
		transform:translatex(100%)
	}
	
	@keyframes navLinksFade{
		from{
			opacity:0;
			transform:translateX(50px);
		}
		to{
			opacity:1;
			transform:translateX(0px);
		}
	}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	
</head>

<body>
	<section class="header">
		
		<i class="fa fa-phone"></i> (209)838-1934 <i class="fa fa-envelope"></i> inquiry@allseasonlawn.net
	</section>
	
	
<!--	NAVIGATION STARTS-->
	
	<nav id="nav">
		
		<a class="navbar-brand" href="/">
      <div class="logo-image">
            <img src="images/navbar_logo_50x50.png" class="img-fluid">
      </div>
</a>
		
	
		<ul class="nav-links">
		<li><a href="/index.php" class="active">Home</a></li>
		<li><a href="/about.html">About</a></li>
		<li><a href="/services.html">Services</a></li>
	
		
		
		<li><a href="/reviews.html">Reviews</a></li>
		<li><a href="/gallery.html">Gallery</a></li>
		<li><a href="/contact.html">Contact</a></li>
		</ul>
		<div class="burger">
		<div class="line1"></div>
		<div class="line2"></div>
		<div class="line3"></div>
			
		</div>
		 </nav>
	
	<script src="app.js"></script>
	
	
</body>
</html>

https://jsfiddle.net/robertrlamb96/3yuzok8r/1/

1 Ответ

0 голосов
/ 21 февраля 2020

У вас было две проблемы с добавлением класса. Сначала вы пытались подключить прослушиватель событий до того, как браузер проанализировал (прочитал) полный текст html. Другими словами, браузер не знал, что означает «бургер» или «навигация». Чтобы преодолеть это, вам нужно запустить скрипт как часть метода onload. Обратите внимание, что в JSFiddle для доступа к этому типу загрузки необходимо установить тип «без переноса», и я не верю, что фрагменты SO поддерживают эту функцию.

Вторая ошибка заключалась в том, что «class » L ist "было написано с ошибкой (« l »пишется с большой буквы). Я полагаю, что у вас еще есть работа, чтобы заставить его работать, но это запускает скрипт. 

const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links')

burger.addEventListener('click', ()=>{
    nav.classList.toggle('nav-active');
});
}

onload = ()=>{
    navSlide();
};

https://jsfiddle.net/6qj0kwmg/

...