0

Estou criando uma página, o objetivo é sempre que eu clicar para expandir o menu a resolução da div diminuir um pouco e sempre que eu clicar de novo essa resolução aumentar pro tamanho normal.

Minha lógica foi o seguinte: Coloquei um onclick na label que dispara uma função que verifica a resolução que está no id, se tiver igual a 100% ela vai colocar para 76.5% (Pois isso indicaria que o menu estava fechado e ia abrir) e se estive-se diferente de 100% ele colocaria em 100% (Pois indicaria que o menu estava aberto e ia fechar)

Porém aconteceu algo inesperado, ele está totalmente ao contrário, quando eu clico para abrir o menu ele aumenta a div e quando clico para fechar ele diminui, aonde estou errando?

HTML

    <body>
    <input type="checkbox" id="check">
    <label id="icone" for="check" onclick="resolucao()"><img src="../../icones/menu.png"></label>

    <div class="barrasuperior">

    </div>

    <div class="barra">
        <div id="caracteristicas">

        </div>
        <nav>
            <input type="text" placeholder="Pesquise uma aula" class="pesquisar">
            <a href=""><div class="link">Módulo 1:</div></a>
            <a href=""><div class="link">Módulo 2:</div></a>
            <a href=""><div class="link">Módulo 3:</div></a>
            <a href=""><div class="link">Módulo 4:</div></a>
            <a href=""><div class="link">Módulo 5:</div></a>
        </nav>
    </div>

    <div id="conteudo">

        <div class="opcoes">
            <div class="anterior">
                <a href="" style="color:white;"><span>Aula Anterior</span></a>
            </div>

            <div class="proximo">
               <a style="color:white;" href=""><span>Próxima Aula</span></a>
            </div>
        </div>

        <div class="aula">

        </div>
        <h2 id="titulo">TITULO DA AULA</h2>
        <button onclick="materiais()">Materiais da Aula</button>

    </div>

    <script>
        function materiais(){
            document.location.href = 'https://google.com/'
        }
    </script>
</body>

CSS

    * {
    margin: 0;
    padding: 0;
}

body {
    background-color:#f9f9f9;
}

a {
    text-decoration: none;
}

.barrasuperior {
    width: 100%;
    height:60px;
    background-color: black;
}

#check {
    display:none;
}

#icone {
    cursor:pointer;
    padding:15px;
    position: absolute;
    z-index: 1;
}

.barra {
    background-color:black;
    height:100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear; 
    left: -300px;
}

nav {
    width: 100%;
    position: absolute;
    top: 60px;
}

nav a {
    text-decoration: none;
}

.pesquisar {
    width: 284px;
    margin-top:10px;
    margin-bottom:10px;
}

.link {
    background-color:#494950;
    padding:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all .2s linear;
    color: #f4f4f9;
    border-bottom: 2px solid #222;
}

.link:hover {
    background-color: #050542;
}

#check:checked ~ .barra {
    transform: translateX(300px)
}

#check:checked ~ .barra nav a .link {
    opacity: 1;
    margin-top:0;
}

#conteudo {
    width:100%;
    height:500px;
    background-color:#191919;
    float:right;
}

#conteudo2 {
    width:76.5%;
    height:500px;
    background-color:#191919;
    float:right;
}

.opcoes {
    width:100%;
    border:1px solid #2c2c2c;
    display:flex;
    justify-content:space-between; 
}

.anterior {
    display:inline;
    padding:10px;
}

.proximo {
    display:inline;
    padding:10px;
}

.aula {
    width: 700px;
    height: 300px;
    margin:20px auto;
    border:1px solid #0b47ca;
    box-shadow:0px 0px 5px #28bcf4;
}

#titulo {
    color: #f3f3f3;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 1.2rem;
    font-family: inherit;
}


button{
    display:block;
    margin:20px auto;
    padding:15px 40px; 
    background-image: linear-gradient(198deg,#28bcf4,#0b47ca);
    border-radius: 30px;
    border:none;
    color:white;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Titillium Web';
    font-size:12px;             
    cursor:pointer;
}

JS

function resolucao(){
var reso = document.getElementById('conteudo').style.width
comparar = '100%'
if(reso == comparar){
    document.getElementById('conteudo').style.width = '76.5%'
} else {
    document.getElementById('conteudo').style.width = '100%'
}

}

2
  • Acho que vc se confundiu nessa frase e se estive-se diferente de 100% ele colocaria em 100% ou era isso mesmo?
    – hugocsl
    4/02/2020 às 12:48
  • 1
    Oi Hugo, é isso mesmo mas acho que eu não soube me explicar muito bem, eu quis dizer assim: O valor padrão do width é 100%, quando abre a página ele já está nesse valor, então ao clicar a primeira vez daria True porque 100% é igual a 100% e ele passaria a ser 76.5%. Já com o menu aberto (no caso o padrão taria em 76.5%) ele seria diferente de 100%, então ele voltaria a colocar nos 100% pois isso iria simbolizar o menu fechado novamente 4/02/2020 às 12:52

2 Respostas 2

0

O problema é que a propriedade .style.width não pega o valor da propriedade width definida no CSS. Ela retorna o valor que estiver no atributo style do elemento:

<div style="width: 100%;"></div>

Como inicialmente o elemento não possui o atributo style, ao chamar a função pela primeira vez, o valor de .style.width será vazio, fazendo com que caia direto no else do if.

Não precisa declarar outra variável com o valor de 100%. Coloque o valor "100%" direto no if, e crie outra condição verificando se a variável reso está vazia. O if ficará assim:

if(reso == "100%" || !reso){

O operador "ou" (||) irá fazer com que seja verificado se uma das condições é verdadeira, ou seja, se reso é igual a 100% ou é vazio (!reso).

E como o menu tem 300px de largura (definido no CSS), não use o valor de 76.5%, pois esse valor nunca será igual à largura total da tela menos a largura do menu de 300px. Em vez disso, use a função calc() do CSS. Basta subtrair 100% - 300px, assim:

document.getElementById('conteudo').style.width = 'calc(100% - 300px)';

Aproveitando que está aprendendo JavaScript, tenha o costume de colocar o ponto-e-vírgula (;) no final das instruções.

Seu código ficará assim:

function resolucao(){
   var reso = document.getElementById('conteudo').style.width;
   if(reso == "100%" || !reso){
       document.getElementById('conteudo').style.width = 'calc(100% - 300px)';
   } else {
       document.getElementById('conteudo').style.width = '100%';
   }
}
* {
    margin: 0;
    padding: 0;
}

body {
    background-color:#f9f9f9;
}

a {
    text-decoration: none;
}

.barrasuperior {
    width: 100%;
    height:60px;
    background-color: black;
}

#check {
    display:none;
}

#icone {
    cursor:pointer;
    padding:15px;
    position: absolute;
    z-index: 1;
}

.barra {
    background-color:black;
    height:100%;
    width: 300px;
    position: absolute;
    transition: all .2s linear; 
    left: -300px;
}

nav {
    width: 100%;
    position: absolute;
    top: 60px;
}

nav a {
    text-decoration: none;
}

.pesquisar {
    width: 284px;
    margin-top:10px;
    margin-bottom:10px;
}

.link {
    background-color:#494950;
    padding:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    transition: all .2s linear;
    color: #f4f4f9;
    border-bottom: 2px solid #222;
}

.link:hover {
    background-color: #050542;
}

#check:checked ~ .barra {
    transform: translateX(300px)
}

#check:checked ~ .barra nav a .link {
    opacity: 1;
    margin-top:0;
}

#conteudo {
    width:100%;
    height:500px;
    background-color:#191919;
    float:right;
}

#conteudo2 {
    width:76.5%;
    height:500px;
    background-color:#191919;
    float:right;
}

.opcoes {
    width:100%;
    border:1px solid #2c2c2c;
    display:flex;
    justify-content:space-between; 
}

.anterior {
    display:inline;
    padding:10px;
}

.proximo {
    display:inline;
    padding:10px;
}

.aula {
    width: 700px;
    height: 300px;
    margin:20px auto;
    border:1px solid #0b47ca;
    box-shadow:0px 0px 5px #28bcf4;
}

#titulo {
    color: #f3f3f3;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 1.2rem;
    font-family: inherit;
}


button{
    display:block;
    margin:20px auto;
    padding:15px 40px; 
    background-image: linear-gradient(198deg,#28bcf4,#0b47ca);
    border-radius: 30px;
    border:none;
    color:white;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Titillium Web';
    font-size:12px;             
    cursor:pointer;
}
<input>
<input type="checkbox" id="check">
 <label id="icone" for="check" onclick="resolucao()"><img src="../../icones/menu.png"></label>

 <div class="barrasuperior">

 </div>

 <div class="barra">
     <div id="caracteristicas">

     </div>
     <nav>
         <input type="text" placeholder="Pesquise uma aula" class="pesquisar">
         <a href=""><div class="link">Módulo 1:</div></a>
         <a href=""><div class="link">Módulo 2:</div></a>
         <a href=""><div class="link">Módulo 3:</div></a>
         <a href=""><div class="link">Módulo 4:</div></a>
         <a href=""><div class="link">Módulo 5:</div></a>
     </nav>
 </div>

 <div id="conteudo">

     <div class="opcoes">
         <div class="anterior">
             <a href="" style="color:white;"><span>Aula Anterior</span></a>
         </div>

         <div class="proximo">
            <a style="color:white;" href=""><span>Próxima Aula</span></a>
         </div>
     </div>

     <div class="aula">

     </div>
     <h2 id="titulo">TITULO DA AULA</h2>
     <button onclick="materiais()">Materiais da Aula</button>

 </div>

1
  • Valeu Sam!! depois de postar eu tinha colocado um alert com a variavel e percebi que a primeira vez estava vazia mesmo, porém não sabia proceder, valeu de verdade, foi uma grande ajuda! 4/02/2020 às 14:58
-1

Olá, seu código estava com alguns erros de sintaxe, e era um dos motivos da sua função não funcionar corretamente. Procure sempre lembrar de colocar o ';' no final das instruções e fechar as chaves '{}' das funções, e coloque a palavra chave var antes de declarar a variável.

Como você já havia atribuído a conteudo a uma variável, eu utilizei ela para alterar o valor do CSS.

function resolucao(){
     var reso = document.getElementById('conteudo').style.width;
     var comparar = '100%';

     if(reso == comparar){
          reso = '76.5%';
     }

     document.getElementById('conteudo').style.width = '100%';
}

Como você só tem duas condições, não é necessário utilizar o else, pois, se o seu if não for verdadeiro, o JavaScript vai pular e ler a próxima instrução.

Espero que tenha ajudado.

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 .