[英]Responsive nav toggle not working
I have spent hours and hours trying to figure out why the menu burger icon toggle is not working, literally tearing my hair out. 我花了几个小时试图弄清楚为什么菜单上的汉堡图标开关不起作用,从字面上扯了我的头发。 I get the error message: 我收到错误消息:
Cannot read property 'addEventListener' of null 无法读取null的属性“ addEventListener”
is this suggesting that it cannot find the element 这是否表明它找不到元素
Any help or even a point in the right direction would be marvelous. 任何帮助甚至正确方向的指导都是很棒的。
HTML : HTML :
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive</title>
<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>
<!-- LANDING PAGE -->
<div class="landing">
<!-- NAVBAR -->
<div class="nav-container">
<div class="Navbar__Link-toggle">
<i class="fas fa-bars fa-lg"></i>
</div>
<div class="logo-name blue-text">First</div>
<div class="logo-name">Second</div>
<div class="menu-items">Skills</div>
<div class="menu-items">About</div>
<div class="menu-items">Portfolio</div>
</div>
</div>
<script type="text/javascript" src="navbar.js"></script>
</body>
</html>
CSS : CSS :
body{
font-family: Roboto-Light;
font-style: normal;
color: #3E3E3E;
display: flex;
justify-content: center;
}
.landing {
width: 100%;
height: 1080px;
display: flex;
justify-content: center;
background-image: url(img/landingpage_mac.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* NAVBAR START */
.nav-container {
width: 80%;
height: 170px;
display: flex;
/* border: solid red 1px; */
overflow: hidden;
padding-top: 40px;
}
.Navbar__Link-toggle {
display:none;
}
/* NAVBAR END */
/* LOGO START */
.logo-name {
font-family: Roboto-Thin;
font-size: 35px;
color: #3E3E3E;
display: flex;
flex-direction: row;
height:35px;
/* border: solid red 1px; */
}
.blue-text {
font-family: Roboto;
font-style: bold;
color: #4999BC;
padding-top:40px;
/* border: solid red 1px; */
}
/* LOGO end */
/* MEDIA QUERIES */
/*iPhone 6 Portrait*/
@media only screen and (min-width: 360px) and (max-width: 667px) and (orientation : portrait) {
.landing {
background-image: url(img/phone_420x630.jpg);
height: 750px;
}
.nav-container{
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}
.menu-items{
display: none;
}
.menu-item-toggle-show{
display: flex;
}
.Navbar__Link-toggle {
align-self: flex-end;
display: initial;
position: absolute;
cursor: pointer;
}
}
JS : JS :
function classToggle() {
const navs = document.querySelectorAll('.Navbar__Items')
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}
document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);
Some class names in your html
, css
and js
files don't match with each other. html
, css
和js
文件中的某些类名彼此不匹配。 Otherwise, it's all OK. 否则,一切都很好。 Change them accordingly: 相应地更改它们:
function classToggle() { const navs = document.querySelectorAll('.Navbar__Items') navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); } document.querySelector('.Navbar__Link-toggle').addEventListener('click', classToggle);
body { font-family: Roboto-Light; font-style: normal; color: #3E3E3E; display: flex; justify-content: center; } .landing { width: 100%; height: 1080px; display: flex; justify-content: center; background-image: url(img/landingpage_mac.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .nav-container { width: 80%; height: 170px; display: flex; overflow: hidden; padding-top: 40px; } .Navbar__Link-toggle { display: none; } .logo-name { font-family: Roboto-Thin; font-size: 35px; color: #3E3E3E; display: flex; flex-direction: row; height: 35px; } .blue-text { font-family: Roboto; font-style: bold; color: #4999BC; padding-top: 40px; } @media only screen and (min-width: 360px) and (max-width: 667px) and (orientation: portrait) { .landing { background-image: url(img/phone_420x630.jpg); height: 750px; } .nav-container { align-items: center; flex-wrap: wrap; flex-direction: column; } .Navbar__Items { display: none; } .Navbar__ToggleShow { display: flex; } .Navbar__Link-toggle { align-self: flex-end; display: initial; position: absolute; cursor: pointer; } }
<div class="landing"> <div class="nav-container"> <div class="Navbar__Link-toggle"> <i class="fas fa-bars fa-lg"></i> </div> <div class="logo-name blue-text">First</div> <div class="logo-name">Second</div> <div class="Navbar__Items">Skills</div> <div class="Navbar__Items">About</div> <div class="Navbar__Items">Portfolio</div> </div> </div>
Here's the jsfiddle: http://jsfiddle.net/gxv47f9j/5/ 这是jsfiddle: http : //jsfiddle.net/gxv47f9j/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.