bmarshall511/slider-menu.jquery.js

View on GitHub
src/scss/slider-menu.jquery.scss

Summary

Maintainability
Test Coverage
// jQuery Slider Menu Core Styles
.slider-menu {
  overflow: hidden;

  nav {
    left: 0;
    position: relative;
    top: 0;
    transition: left .2s;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    ul {
      left: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      transition: opacity .2s;
      visibility: hidden;
      width: 100%;
    }

    &.slider-menu-active {
      opacity: 1;
      visibility: visible;
    }
  }

  [data-vertical="true"] {
    .slider-menu-back {
      display: none;
    }

    ul {
      display: none;
      left: auto;
      opacity: 1;
      position: relative;
      top: auto;
      visibility: visible;


      &.slider-menu-active {
        display: block;
      }
    }
  }
}