Menu Slide

Variables

None

Mixins

Parameters

  • $menuColor (required) - Color;
  • $closeColor (required) - Color;

Usage

.menu-slide {
  @mixin menu-slide black, white;
}

Output

.menu-slide {
  & .menu-btn {
    position: absolute;
    visibility: hidden;
    width: 28px;
    height: 28px;
    margin-left: -999em;
    -webkit-appearance: none;

    & + label {
      display: block;
      float: right;
      width: 28px;
      height: 28px;
      margin: 0;
      transition: color .3s ease-in-out;
      cursor: pointer;
      user-select:none;

      &::after {
        display: inline-block;
        vertical-align: middle;
        border: 0;
        padding: 0;
        background: transparent;
        color: black;
        font-family: Arial;
        font-size: 36px;
        line-height: 1;
        content: '\2261';
      }
    }
    &:checked {
      & + label {
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1000;
          margin: 10px;
          border: 1px solid white;
          border-radius: 50%;
          padding: 2px 8px 0;
          color: white;
          content: '\00d7';
        }
      }
      & ~ .menu-container {
        right: 60%;
        overflow-y: auto;
      }
    }
    & ~ .menu-container {
      position: fixed;
      top: 0;
      right: -60%;
      z-index: 10;
      width: 60%;
      height: 100%;
      box-shadow: -3px 0 3px 0 rgba(0, 0, 0, 0.25);
      padding: 20px 0 40px;
      padding-top: 80px;
      background-color: black;
      transform: translate3d(100%, 0, 0);
      transition: transform 250ms cubic-bezier(0.35, 0.97, 0.57, 0.99),
                  right 250ms cubic-bezier(0.35, 0.97, 0.57, 0.99) 300ms;
    }
  }
  &.menu-left {
    & .menu-btn {
      & + label {
        float: left;
      }
      &:checked {
        & + label::after {
          right: auto;
          left: 0;
        }
        & ~ .menu-container {
          left: 60%;
        }
      }
      & ~ .menu-container {
        right: auto;
        left: -60%;
        box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.25);
        transform: translate3d(-100%, 0, 0);
        transition: transform 250ms cubic-bezier(0.35, 0.97, 0.57, 0.99),
                    left 250ms cubic-bezier(0.35, 0.97, 0.57, 0.99) 300ms;
      }
    }
  }
}

Helpers

None

Example

Right Side (default)

<div class="col-9"><h1>ClientKit</h1></div>
<div class="col-3">
  <div class="menu-slide">
    <input id="header-menu" class="menu-btn" type="checkbox" />
    <label for="header-menu"></label>
    <div class="menu-container text-right">
      <nav class="menu-header-container">
        <a href="">Menu 1</a>
        <a href="">Menu 2</a>
        <a href="">Menu 3</a>
        <a href="">Menu 4</a>
      </nav>
    </div>
  </div>
</div>

Left Side

<div class="col-plain">
  <div class="menu-slide menu-left">
    <input id="header-menu" class="menu-btn" type="checkbox" />
    <label for="header-menu"></label>
    <div class="menu-container">
      <nav class="menu-header-container">
        <a href="">Menu 1</a>
        <a href="">Menu 2</a>
        <a href="">Menu 3</a>
        <a href="">Menu 4</a>
      </nav>
    </div>
  </div>
</div>
<div class="col-11"><h1>ClientKit</h1></div>