Problems with :checked css

Asked

Viewed 238 times

0

I’m trying to make a menu appear when the checkbox is checked 

/* 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>

I tried to use the :checked when the input is checked the menu stay with disblay: block; but it doesn’t work, it only works when they’re in the same div but I don’t want to do it like this.

html css

  • .mobile input:checked Because you don’t. There’s only one input:checked in the mobile class

  • @Maurydeveloper I want that when that input is checked it changes the . menu-Mb.

2 answers

0


This won’t work at all. The way your rule is .menu-mb would have to be a son of .mobile input:checked, which does not match your marking. What you can do is move the input=checkbox out of the element it is, as if it were a "global controller". Thus, the action of :checked may change any other following.

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>

  • vlw for the tip!!

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>

Browser other questions tagged html css

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