I'm trying to create a menu with options inside. I'm using only CSS with checkbox
and radio
inputs.
By changing one of the options, I also want the menu to close. I tried this using label
inside label
, but it doesn't work.
My prototype code:
input {
display: none;
}
label {
cursor: pointer;
}
label span:hover {
font-weight: 600;
}
.opener .menu {
background-color: #f3f3f3;
display: flex;
flex-direction: column;
color: #4d4d4d;
padding: 12px 4px;
width: 270px;
}
#menu:checked~.opener .menu {
display: none;
}
#menu~.opener>span:nth-of-type(1) {
display: none;
}
#menu:~.opener>span:nth-of-type(2) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(1) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(2) {
display: none;
}
.box {
height: 50px;
width: 50px;
margin: 20px 0;
}
#red:checked~.box {
background-color: red;
}
#blue:checked~.box {
background-color: blue;
}
#green:checked~.box {
background-color: green;
}
<input id="menu" type="checkbox"></input>
<input id="red" type="radio" name="opcoes" checked></input>
<input id="blue" type="radio" name="opcoes"></input>
<input id="green" type="radio" name="opcoes"></input>
<label class="opener" for="menu"><span>Open</span><span>Close</span>
<div class="menu">
<label for="red"><span>red</span></label>
<label for="blue"><span>blue</span></label>
<label for="green"><span>green</span></label>
</div>
</label>
<div class="box"></div>
Or you can check here: https://codepen.io/anon/pen/JxzPKR
Is there a way to close the menu when you click on one of the options without JavaScript?
Sometimes, contrary to popular opinion, it's just more dev friendly to use Javascript.
There is too much conditional logic for this to be a pure CSS solution. There are ~3 if-then-else
conditions you would have to satisfy, while keeping the styles cascading. I think the most arduous task to satisfy is that you have a toggle header, in addition to other controls toggling it.
This will inherently get more complex and convoluted the more components you add. But here is an example using :target
. This is a work-around and provides a solution to the question at hand. You won't be able to 'toggle' the menu this way so I had to add the header under the elements so it can be accessed via some kind of sibling selector:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
.menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
.menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
.menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) + .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target + .menu-header > a {
display: none;
}
#menu-body:target + .menu-header > a.close {
display: inline-block;
}
<div class="menu">
<div id="menu-body">
<input id="red" type="radio" name="opcoes" checked/>
<label for="red"><a href="#">Red</a></label>
<input id="blue" type="radio" name="opcoes"/>
<label for="blue"><a href="#">Blue</a></label>
<input id="green" type="radio" name="opcoes"/>
<label for="green"><a href="#">Green</a></label>
</div>
<div class="menu-header"><a href="#menu-body">≡ Open</a><a href="#" class="close">≡ Close</a></div>
</div>
You should consider accessability using this method, or at minimum, how this effects site navigation.
Edit: A demo in regards to discussion in comments:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
#menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
#menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
#menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) ~ .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target ~ #menu-header > a {
display: none;
}
#menu-body:target ~ #menu-header > a.close {
display: inline-block;
}
#red:target ~ .box {
background-color: red;
}
#blue:target ~ .box {
background-color: blue;
}
#green:target ~ .box {
background-color: green;
}
.box {
background-color: black;
width: 75px; height : 75px;
}
<div class="menu">
<input id="red" type="radio" name="opcoes" checked/>
<input id="blue" type="radio" name="opcoes"/>
<input id="green" type="radio" name="opcoes"/>
<div id="menu-body">
<a href="#red">Red</a>
<a href="#blue">Blue</a>
<a href="#green">Green</a>
</div>
<div class="box"></div>
<div id="menu-header">
<a href="#menu-body">≡ Open</a>
<a href="#" class="close">≡ Close</a>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With