Menu menu is not working when I click on toggle-btn

Asked

Viewed 49 times

1

Menu menu is not working,when I click on toggle-btn it is not calling my menu-config, it is not showing up

function toggleSidebat(){
    document.getElementById("menu-config").classList.toggle('active');
}
*{
    margin: 0px;
    padding: 0px;
}
#menu-config{
    width: 200px;
    height: 100%;
    position: fixed;
    background-color: #3589F0;
    left: -200px
}
#menu-config .active{
  left: 0px;
}

#menu-config .toggle-btn{
    background-color: #44bd32;
    position: absolute;
    right: -50px;
    top: 0px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
#menu-config .toggle-btn img{
    width: 35px;
    height: 35px;
    position: absolute;
    left: 18%;
    top: 18%;
    display: none;
}

#menu-config .toggle-btn:hover img{
transform: rotate(1000grad);
transition: 8s;

}
    <div id="menu-config">
    
    <div class="toggle-btn" onclick="toggleSidebat()">
        <img src="../Imagens/settings.png" alt="">
    </div> 
        
     opa

javascript html css

  • Detail the error, explain what is happening. Thus facilitates understanding and response.

  • when I click on toggle-btn it is not calling my menu-config, it is not showing up

  • What you would like to appear when you click the button, the image?

1 answer

0


Actually your problem is with CSS and not with JS

I left it in the CSS, but in this style the class has to be pasted in the ID getting this way #menu-config.active this means it is the "ID with the class" if you leave separate means the ID and the element inside with the class" understands...

See your code working. In the HTML part I just closed the div of the menu that was to Berta. NOTE: I put display:block in the image for it to appear and you check how it looked

function toggleSidebat(){
            document.getElementById("menu-config").classList.toggle('active');
}
*{
    margin: 0px;
    padding: 0px;
}
#menu-config{
    width: 200px;
    height: 100%;
    position: fixed;
    background-color: #3589F0;
    left: -200px
}
#menu-config.active{ /* a classe tem que estar unida ao ID */
  left: 0px;
}

#menu-config .toggle-btn{
    background-color: #44bd32;
    position: absolute;
    right: -50px;
    top: 0px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
#menu-config .toggle-btn img{
    width: 35px;
    height: 35px;
    position: absolute;
    left: 18%;
    top: 18%;
    display: block; /* display: none para esconder a imagem */
}

#menu-config .toggle-btn:hover img{
transform: rotate(1000grad);
transition: 8s;
}
<div id="menu-config">

    <div class="toggle-btn" onclick="toggleSidebat()">
        <img src="http://placeskull.com/50/50" alt="">
    </div> 
        
    opa
</div>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.