Responsive sidebar interaction using CSS
Question
I am trying to mimic a click interaction using CSS pseudo class selectors on responsive sidebar but somehow the focus event is not recognizing.
HTML
<html>
<body>
<nav class="sidebar">
<div class="smart"></div>
</nav>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.sidebar{
width: 30vw;
height: 100vh;
background-color: grey;
}
@media (max-width:425px){
.sidebar{
width: 30vw;
transform: translate3d(-30vw, 0, 0);
transition: all 0.3s ease-in-out;
}
.smart{
position: absolute;
width: 40px;
height: 40px;
left: 100%;
background: black;
}
.sidebar:focus {
transform: translate3d(0, 0, 0);
}
.sidebar:focus .smart{
pointer-events: none;
}
}
https://jsfiddle.net/5Lt0mgyk/
Any help would be appreciated. TIA
2 answers
solution1
1 ACCPTED 2020-06-09 05:54:04
You need to set the tabindex attribute to make the div focusable.
<html>
<body>
<nav class="sidebar" tabindex="0">
<div class="smart"></div>
</nav>
</body>
</html>
solution2
0 2020-06-09 05:58:02
All html elements can't receive a css:focus, there are only certain defined elements that can receive focus and it also depends upon browser, but mostly these are those elements which can receive and input, for more detailed explanation and element list you can refer to this link Which HTML elements can receive focus? Hope it helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.