You can do this in CSS by (ab)using the checkbox hack:
#toggle {
position: relative;
left: -100vw;
}
#click-to-toggle {
border: 2px solid #111111;
background: #111111;
color: #F5F5F7;
border-radius: 5px;
padding: 10px;
cursor: pointer;
transition: all 0.2s;
}
#click-to-toggle:hover {
background: #F5F5F7;
color: #111111;
}
.toggled {
display: none;
}
#toggle:checked ~ .toggled {
display: block;
}
<label for="toggle" id="click-to-toggle">
Click to toggle list
</label>
<input type="checkbox" id="toggle">
<br /><br />
<ul class="toggled">
<li>
<a href="/site1">site1</a>
</li>
<li>
<a href="/site2">site2</a>
</li>
</ul>
the possible way with the button is to create two buttons where one hide and other show the list here is the snippet
button {
cursor: pointer;
background: red;
width: 90px;
height: 30px;
}
.close:focus ~ .list{
display: none;
}
.open:focus ~ .list{
display: block;
}
<ul>
<li>
<button class="close">close</button>
<button class="Open">Open</button>
<ul class="list">
<li>
<a href="/site1">site1</a>
</li>
<li>
<a href="/site2">site2</a>
</li>
</ul>
</li>
</ul>
I use CSS only to open/close a list. But once the list is open I cannot open a link of any of the <li> items. Why not?
.stufflisted {
cursor: pointer;
}
.stufflisted:focus+.openlinksstuff {
display: block;
}
.stufflisted:focus {
pointer-events: none;
}
.stufflisted {
display: none;
overflow: hidden;
}
<li>
<button class="stufflisted focus:outline-none">Open my stuffs">
btn
</button>
<ul class="openlinksstuff">
<li>
<a href="/site1">site1</a>
</li>
<li>
<a href="/site2">site2</a>
</li>
</ul>
</li>
So why here the <a> hrefs links do not work and how to make them work? I do not want Javascript for this.
because css have on focus but no blur if you need one button you’ll need javascript
And @Gad your solution does not work if I click away from the button and focus turns off
and even if you are complaining I admire what you did but that’s not the only way
