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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

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

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

asked by anonymous 15.05.2018 / 15:55

2 answers

0

Add the # character in the getElementByID parameter.

It will look like this:

function toggleSidebat(){
    document.getElementById("#menu-config").classList.toggle('active');
}

15.05.2018 / 16:33

IA Weak, concept and example in software development Why does an error occur at the end of a file that ends with whitespace in a while loop, using the read operator?

score 0 · Accepted Answer

In fact, your problem is with CSS and not with JS

I have commented in CSS, but in this style the class has to be pasted into the ID, thus getting #menu-config.active , this means that it is the "ID with the class" if you leave separated it means the ID and the element inside with the class "understand ...

See your code working. In the HTML part I just closed the div from the menu that was playing. NOTE: I put the display: block in the image so that it appears and you can see how it was

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>