-1

I'm trying to open a menu if my checkbox is checked. And when I check it, It doesn't make any change, my menu is still closed. I recently started in "programming web pages" (I don't even know if that's the correct term). I used the #Menu because my checkbox Id is Menu. It's inside an input element.

.List{
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(51, 51, 51, 0.9);
    font-size: 25px;
    transition: all 0.5s;
    transform: translateX(-100%);
}
.List a{
    font-weight: bolder;
    display: block;
    color: white;
    height: 50px;
    text-decoration: none;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

.List a:hover{
    background: rgba(255, 255, 255, 0.3);
}

#Menu:checked ~ .List{
    transform: translateX(0%);
}
isherwood
  • 58,414
  • 16
  • 114
  • 157
Agustin Lizondo
  • 9
  • 1
  • Please include your markup in your post, and build a functional snippet using the editor. It's hard to help with half the story. – isherwood Apr 29 '21 at 20:18
  • [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) – TylerH Apr 29 '21 at 20:20
  • You will need to position your markup in a particular way. I'm out of votes for the day; if I remember tomorrow I will come by and provide duplicate targets for this. – TylerH Apr 29 '21 at 20:21
  • Does this answer your question? [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) – IMSoP Apr 29 '21 at 20:32
  • I don't know what's the markup haha I'm sorry. but I'll see what you sent to me, Thank you so much to all of you <3 – Agustin Lizondo Apr 29 '21 at 22:08

1 Answers1

0

Tambien puedes hacerlo de la siguiente manera declaras un check o lo que tu desees utilizar

<div class='col-xs-12 col-sm-1 col-md-1'>
    <div class='checkbox'>
    <label style='position: absolute;top: 15px;'><input id='mas' type='checkbox' 
     value='' name='check' onclick='Check(this)'>Mas</label>
    </div>
    </div>

y creas el menu que quieras que se muestre aplicandole un propieda hidden

  <div class='col-xs-12 col-sm-4 col-md-4' hidden id='idmenuoculto'>
    <label class='labels' for='idmenu'>Menu</label>
    <select class='form-control' id='idmenu' style= 'margin-bottom: 10px'>
    </select>
    </div>

y creas un funcion en JS para llamarla con el check dentro de la funcion hacemos una comparacion si el check se encuentra seleccionado o no

function Check(checkbox) {
if (checkbox.id == 'mas' && checkbox.checked == true) {
    $("#idmenuoculto").show();
 

} else if (checkbox.id == 'mas' && checkbox.checked == false) {
    $("#idmenuoculto").hide();
}

}

espero te sirva

user15796806
  • 16
  • Ah dale muchas gracias! El tema es que no manejo muy bien JS, por eso había buscado como hacerlo con CSS, y tenía entendido que el ~ cumplía esa función, pero veo que no, o a mi no me funciona jaja! – Agustin Lizondo Apr 29 '21 at 22:06