Estou fazendo uma navbar do zero, porém não estou tendo sucesso na hora de acionar como o elemento ul como block. Queria saber o motivo. No console aparece que a classe está sendo adicionada e removida, porém não tem nenhum efeito.
Meu código
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-family: sans-serif;
}
nav{
width: 100%;
background: #00316b;
}
ul{
width: 80%;
margin: 0 auto;
padding: 0;
}
ul li{
list-style: none;
display: inline-block;
padding: 20px;
}
ul li:hover{
background: #e91e63;
}
ul li a{
color: #fff;
text-decoration: none;
}
.toggle{
width: 100%;
padding: 10px 20px;
background: #001f44;
box-sizing: border-box;
text-align: right;
color: #fff;
font-size: 20px;
display: none;
}
#menu{
transition: 1s;
}
.d-block{
display: block;
}
@media screen and (max-width: 768px) {
.toggle{
display: block;
}
#menu{
width: 100%;
display: none;
}
ul li{
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<nav>
<div class="toggle">
<button onclick="clique()">Clique</button>
</div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
<script type="text/javascript">
let div = document.getElementById('menu');
function clique(){
if (div.className.indexOf('d-block')<0) {
div.classList.add('d-block');
console.log('elemento block');
}else{
div.classList.remove('d-block');
console.log('elemento none');
}
}
</script>
</body>
</html>