0

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>

1 Resposta 1

2

Cara seu problema não é mesmo o JS não é com o CSS.

Veja esse seu código, repare que vc colocou display: none usando o ID

@media screen and (max-width: 768px)
#menu {
    width: 100%;
    display: none; /* esse None tem mais força que o Block da d-block, pois o estilo do ID sobrescreve o estilo da Classe*/
}

E depois vc tenta retirar esse display fazendo um .classList.add('d-block') e .classList.remove('d-block') pelo JS, mas isso nunca vai funcionar, pq os estilos CSS do ID #menu, sempre vão prevalecer sobre os estilos da classe .d-block.

inserir a descrição da imagem aqui

Agora que vc já sabe pq não funcionava, vc pode corrigir simplesmente colocando um !important na classe

   .d-block{
        display: block !important;
    }

Ou pode não colocar o display: none no ID e colocar na ul, tipo ul {display: none}. No caso eu usei o !important para ficar mais fácil e mexer o mínimo possível no seu código.

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');
    }
}
*{
    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 !important;
}
@media screen and (max-width: 768px) {
    .toggle{
        display: block;
    }
    #menu{
        width: 100%;
        display: none;
    }
    ul li{
        display: block;
        text-align: center;
    }
}
<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>

2
  • Obrigado @hugo.
    – teste-90
    31/10/2019 às 22:53
  • @Diogosouza sem problema meu caro, estude tbm os seletores CSS vai te ajudar com esses problemas no futuro
    – hugocsl
    31/10/2019 às 22:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .