У меня проблема, я не знаю, как с ней работать, у меня есть кнопка / ссылка «Развернуть панель навигации», которая должна при нажатии вызывать меню навигации в верхней части окна. Теперь это работает, но только после второго нажатия кнопки.
После прочтения других сообщений: я попытался инвертировать оператор if / else, но это не сработало. Я также пытался проверить null, но в операторе if читалось:
if(showNav.style.top === "")
Но это тоже не сработало. В некоторых сообщениях говорится, что по аналогичной проблеме вы должны переместить файл JS в заголовок HTML, но мне это не кажется правильным?
Пожалуйста, смотрите мой код ниже:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../dist/css/main.css">
<title>Navbar Dropdown Anim</title>
</head>
<body>
<header class="navbar__container">
<div class="navbar__container__logo"><a href="" class="navbar__container__logo__link">
<h1>Logo</h1>
</a></div>
<nav class="navbar">
<ul class="navbar__list">
<li class="navbar__list__item"><a href="" class="navbar__list__item__link">Home</a></li>
<li class="navbar__list__item"><a href="" class="navbar__list__item__link">About Us</a></li>
<li class="navbar__list__item"><a href="" class="navbar__list__item__link">Services</a></li>
<li class="navbar__list__item"><a href="" class="navbar__list__item__link">Contact Us</a></li>
</ul>
</nav>
</header>
<h2><a id="btn" href="#">Expand Navbar</a></h2>
<script src="js/main.js"></script>
</body>
</html>
CSS:
body, html {
margin: 0;
height: 100vh;
}
body {
background-color: #eeeeee;
height: 100vh;
font-family: 'Nunito', sans-serif;
}
.navbar__container {
position: relative;
top: -100%;
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 55px 50px;
box-shadow: 2px 2px 12px 5px #777;
background: #333;
transition: all .4s;
transition-timing-function: ease-in-out;
&__logo {
display: flex;
justify-content: center;
margin-top: 20px;
}
&__logo__link {
margin-bottom: 30px;
color: #fff;
text-decoration: none;
}
.navbar {
display: flex;
justify-content: center;
margin-bottom: 15px;
&__list {
display: flex;
&__item {
margin-right: 15px;
list-style: none;
}
&__item__link {
color: #fff;
text-decoration: none;
}
}
}
}
JS:
btn = document.querySelector('#btn');
showNav = document.querySelector('.navbar__container');
btn.addEventListener('click', function(e) {
console.log('Button Clicked')
if(showNav.style.top === "-100%") {
showNav.style.top = "0";
} else {
showNav.style.top = "-100%"
}
})
Я уверен, что есть много из лучших способов сделать это, а также я заранее прошу прощения, если я нарушил какие-либо этикеты публикации, был бы очень признателен за помощь, чтобы понять, где я иду не так.
Большое спасибо