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

score 1 · Accepted Answer · answered Jun 09 '20 at 05:54

1

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>

answered Jun 09 '20 at 05:54

cam

3,179
1
12
15

score 0 · Answer 2 · answered Jun 09 '20 at 05:58

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.

Responsive sidebar interaction using CSS

2 Answers2