sibling selector test

by Tenderfeel

HTML

<input type="checkbox" id="trigger">
<nav>
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
</nav>

SCSS

html, body {
  height: 100%;
}
nav {
  height: 100%;
  background: rgba(159, 186, 255, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  -webkit-transition: height .6s ease-in-out;
  transition: height .6s ease-in-out;
  overflow: hidden;

  & > a {
    position: relative;
    display: block;
    text-align:center;
    height: 72px;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    margin: 64px auto;
  }
  
  & > a:first-of-type {
    margin-top: 100px;
  }
}

#trigger {
  background: #556bc7;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  position: absolute;
  top: 0;
  right: 8px;
  -webkit-appearance: none;
  outline: none;
  z-index: 10;
  
  &:checked {
    background: #7b87b7;
  }

  & ~ nav {
    height: 0;
  }
  &:checked ~ nav {
    height: 100%;
  }

}