Experiment 6

Hover-based drawer sliding

by lasha

HTML

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>
  <div class="item item-8"></div>
  <div class="item item-9"></div>
  <div class="item item-10"></div>
  <div class="item item-11"></div>
  <div class="item item-12"></div>
  <div class="item item-13"></div>
  <div class="item item-14"></div>
  <div class="item item-15"></div>
  <div class="item item-16"></div>
  <div class="item item-17"></div>
  <div class="item item-18"></div>
  <div class="item item-19"></div>
  <div class="item item-20"></div>
  <div class="item item-21"></div>
  <div class="item item-22"></div>
  <div class="item item-23"></div>
  <div class="item item-24"></div>
  <div class="item item-25"></div>
  <div class="item item-26"></div>
  <div class="item item-27"></div>
  <div class="item item-28"></div>
  <div class="item item-29"></div>
  <div class="item item-30"></div>
  <div class="item item-31"></div>
  <div class="item item-32"></div>
  <div class="item item-33"></div>
  <div class="item item-34"></div>
  <div class="item item-35"></div>
  <div class="item item-36"></div>
  <div class="item item-37"></div>
  <div class="item item-38"></div>
  <div class="item item-39"></div>
  <div class="item item-40"></div>
  <div class="item item-41"></div>
  <div class="item item-42"></div>
  <div class="item item-43"></div>
  <div class="item item-44"></div>
  <div class="item item-45"></div>
  <div class="item item-46"></div>
  <div class="item item-47"></div>
  <div class="item item-48"></div>
  <div class="item item-49"></div>
  <div class="item item-50"></div>
  <div class="item item-51"></div>
  <div class="item item-52"></div>
  <div class="item item-53"></div>
  <div class="item item-54"></div>
  <div class="item item-55"></div>
  <div class="item item-56"></div>
  <div class="item...

SCSS

.container {
  position: relative;
  border: 1px solid #000;
  height: 100px;
}
.item {
  position: absolute;
  left: 0;
  width: 1%;
  height: 100%;
  z-index: 1;
}
.drawer {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  transition: width 0.25s ease-in-out;
  /* transition: width 0.25s linear; */
  /* background-color: #FFF8E7; // cosmic latte */
  background-color: DarkSlateGray;
}
@for $i from 0 through 100 {
  .item-#{$i + 1} {
    left: 0% + $i;
    &:hover ~ .drawer {
      transition: none;
      width: 0% + ($i + 1);
      /* width: 0% + $i; */
      &:after {
        position: absolute;
        right: -50px;
        bottom: -20px;
        content: "hello #{$i + 1}";
      }
    }
  }
}