0

Estou tentando fazer com que um menu apareça quando o checkbox estiver checado

/* Menu Mobile */
.mobile{
	position: fixed;
	display: block;
}
.mobile input{
	display: none;
}
.mobile label{
	color: yellow;
	font-size: 8vh;
	text-align: center;
	cursor: pointer;
	width: 8vh;
	display: none;
}
.menu-mb{
	background-color: #111;
	display: none;
	margin-top: 9vh;
	width: 75vw;
	height: 100vh;
	position: fixed;
}
.menu-mb ul{
	list-style: none;
}
.menu-mb ul li{
	float: none;
	width: 100%;
}
.menu-mb a{
	text-decoration: none;
	color: white;
	padding: 2vh;
	display: block;
	text-align: center;
}
@media(max-width: 800px){
	.mobile label{
		display: block;
	}
	.mobile input:checked .menu-mb{
		display: block;
	}
}  
<!-- Menu Mobile -->
<div class="mobile" style="width: 100%; background-color: #111">
    <input type="checkbox" id="bt-menu">
    <label for="bt-menu">&equiv;</label>
</div>	
<nav class="menu-mb">
    <ul>
        <li><a href="#" target="_self">Shounen</a></li>
        <li><a href="#" target="_self">Shoujo</a></li>
        <li><a href="#" target="_self">Ecchi</a></li>
    </ul>	
</nav>

Tentei usar o :checked para quando o input estiver checado o menu ficar com disblay: block; mas não funciona, Só funciona quando eles estão em uma mesma div mas não quero fazer assim.

2
  • .mobile input:checked Porque você não faz isso. Só existe um input:checked na classe mobile Commented 17/08/2019 às 16:52
  • @MauryDeveloper eu quero que quando esse input esteja checado ele altere o .menu-mb. Commented 17/08/2019 às 16:55

2 Respostas 2

0

Isso não irá funcionar mesmo. Da forma como está sua regra .menu-mb teria que ser um filho de .mobile input:checked, o que não condiz com a sua marcação. O que você pode fazer é mover o input=checkbox para fora do elemento que ele está, como se fosse um "controlador global". Assim, a ação de :checked nele poderá alterar qualquer outro elemento seguinte.

input#bt-menu { display: none } /* Esconde o input controlador */
input:checked ~ .menu-mb { display: block !important } /* Exibe o menu quando estiver checado */

/* Menu Mobile */
.mobile{
    position: fixed;
    display: block;
    background-color: #111;
    width: 100%
}
.mobile label{
    color: yellow;
    font-size: 8vh;
    text-align: center;
    cursor: pointer;
    width: 8vh;
    display: block
}
.menu-mb{
    background-color: #111;
    display: none;
    margin-top: 9vh;
    width: 75vw;
    height: 100vh;
    width: 100%;
    position: fixed
}
.menu-mb ul{
    list-style: none;
}
.menu-mb ul li{
    float: none;
    width: 100%
}
.menu-mb a{
    text-decoration: none;
    color: white;
    padding: 2vh;
    display: block;
    text-align: center
}
<input type="checkbox" id="bt-menu"> <!-- alteração -->
<div class="mobile">
  <label for="bt-menu">&equiv;</label>
</div>
<nav class="menu-mb">
  <ul>
    <li><a href="#" target="_self">Shounen</a></li>
    <li><a href="#" target="_self">Shoujo</a></li>
    <li><a href="#" target="_self">Ecchi</a></li>
  </ul>
</nav>

1
  • vlw pela dica!! Commented 17/08/2019 às 20:41
0
 Tenta com as alterações realizadas no .css

/* Menu Mobile */
.mobile{
	
	display: block;
}
#bt-menu{
	display: none;
}
.mobile label{
	color: yellow;
	font-size: 8vh;
	text-align: center;
	cursor: pointer;
	width: 8vh;
    cursor: pointer;
}
.menu-mb{
	background-color: #111;
	display: none;
	margin-top: 9vh;
	width: 75vw;
	height: 100vh;
	transition: all 0.5s;
    transform: translateX(-100%);
}

#bt-menu:checked ~ .menu-mb{
transform: translateX(0%);
}


.menu-mb ul{
	list-style: none;
}
.menu-mb ul li{
	float: none;
	width: 100%;
}
.menu-mb a{
	text-decoration: none;
	color: white;
	padding: 2vh;
	display: block;
	text-align: center;
}
@media(max-width: 800px){
	.mobile label{
		display: block;
	}
	.mobile input:checked .menu-mb{
		display: block;
	}
}  
<!-- Menu Mobile -->
<div class="mobile" style="width: 100%; background-color: #111">
    <input type="checkbox" id="bt-menu">
    <label for="bt-menu">&equiv;</label>
</div>	
<nav class="menu-mb">
    <ul>
        <li><a href="#" target="_self">Shounen</a></li>
        <li><a href="#" target="_self">Shoujo</a></li>
        <li><a href="#" target="_self">Ecchi</a></li>
    </ul>	
</nav>

1
  • obrigado!!!!!!! Commented 17/08/2019 às 20:41

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 .