При нажатии на бургер должно открыться меню, но не открывается
JS
let topnav;
topnav = document.getElementById('topnav');
const topnavStyle = window.getComputedStyle(topnav)
function burger() {
if (topnavStyle.display === 'none') { // если в css свойство display равняется none
for(var i = 0; i < topnav.length; i++)topnav[i].style.display='block'; // смена none на block
}
if(topnavStyle.display === 'block') { // если в css свойство display равняется block
for(var i = 0; i < topnav.length; i++)topnav[i].style.display='none'; // смена block на none
}
console.log('It worked!') // проверка работы функции
}
console.log(topnavStyle.display) // выводит none
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="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=B612&display=swap" rel="stylesheet">
<title>site123</title>
</head>
<body>
<div class="container">
<header>
<div class="header-logo"><p>site123</p></div>
<div id="topnav">
<a href="http://www.site123.org/index.php" class="home">Home</a>
<br>
<a href="http://www.site123.org/login.php" class="login">Login</a>
<br>
<a href="http://www.site123.org/register.php" class="register">Register</a>
</div>
<div class="burger" id="burger" onclick="burger()">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</header>
</div>
<script src="javascript/main.js"></script>
</body>
</html>
CSS
#topnav{
display: none;
columns: 1 auto;
position: absolute;
right: 8px;
top: 82px;
background-color: black;
overflow: hidden;
}
#topnav a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: 'B612', sans-serif;
}
#topnav a:hover{
background-color: #ddd;
color: black;
font-family: 'B612', sans-serif;
}
.burger{
position: absolute;
top: 30px;
right: 15px;
cursor: pointer;
}
.line {
width: 25px;
height: 3px;
margin: 5px;
background-color: #fff;
}
Простой
