Full-Page Navigation

There was a challenge on CodePen during the second week of January to build a full-page navigation. I just happened to recently finish working on one for the new Art by Elina website. I built something that transitioned horizontally because the page transitions on Art by Elina were done vertically. So this is the script I wrote and used to do that.

---

The Prototype

The demo is best viewed with the zoom set to 0.5x.

---

The Setup

<div class="hamburger">
  <!-- Toggle Here -->
</div>

<div class="menu">
  <div class="menu__left">
    <!-- Content Here -->
  </div>
  <div class="menu__right">
    <!-- Content Here -->
  </div>
</div>

.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;

  height: 100%;
  width: 100%;

  visibility: hidden;
  opacity: 0;

  @media (min-width: 54rem) {
    min-height: 40em;
  }

  .js-menu-visible & {
    z-index: 998;

    visibility: visible;
    opacity: 1;
  }

  &__left,
  &__right {
    position: absolute;
    top: 0;

    height: 100%;
  }

  &__left {
    left: 0;

    display: flex;
    width: 100%;

    overflow: hidden;
  }

  &__right {
    display: none;

    @media (min-width: 54rem) {
      display: block;
    }
  }
}

The menu is divided into a left and right container. The width of the containers are set in the script depending on the user's screen size.

---

The Script

jQuery and anime.js v3 have to be included for the script to work. The timeline does not work in v2.

const Menu = (() => {
  let s;

  return {
    settings() {
      return {
        body: $('body'),
        hamburger: $('.hamburger'),
        open: 'js-menu-open',
        visible: 'js-menu-visible',
        overflow: 'js-overflow',
        width: $(window).width(),
        prevWidth: $(window).width(),
      };
    },

    init() {
      s = this.settings();
      this.bindEvents();
    },

    bindEvents() {
      let menuContainerWidth;

      if (s.width < 864) {
        menuContainerWidth = 100;
      } else if (s.width < 1456) {
        menuContainerWidth = 50;
      } else {
        menuContainerWidth = 45;
      }

      $(window).on('resize', () => {
        s.width = $(window).width();

        if (s.width < 864) {
          menuContainerWidth = 100;
        } else if (s.width < 1456) {
          menuContainerWidth = 50;
        } else {
          menuContainerWidth = 45;
        }
      });

      s.hamburger.on('click', () => {
        Menu.toggleMenu(menuContainerWidth);
      });

      s.body.on('keyup', e => {
        if (s.body.hasClass(s.open) && e.which === 27) {
          Menu.toggleMenu(menuContainerWidth);
        }
      });
    },

    toggleMenu(width) {
      s.hamburger.toggleClass('js-hamburger');
      s.body.toggleClass(s.open);
      s.body.toggleClass(s.overflow);

      if (s.body.hasClass(s.open)) {
        s.prevWidth = width;

        anime.timeline({
          easing: 'easeOutQuart',
          duration: 600,
          begin() {
            $('.menu__right').css('left', `${width}%`);
            s.body.addClass(s.visible);
          }
        })
        .add({
          targets: '.menu__left',
          width: [0, `${width}%`]
        })
        .add({
          targets: '.menu__right',
          width: [0, `${100 - width}%`]
        }, 0);
      }

      if (!s.body.hasClass(s.open)) {
        anime.timeline({
          easing: 'easeInQuart',
          duration: 600,
          delay: 200,
          complete() {
            s.body.removeClass(s.visible);
          }
        })
        .add({
          targets: '.menu__left',
          width: [`${s.prevWidth}%`, 0]
        })
        .add({
          targets: '.menu__right',
          width: [`${100 - s.prevWidth}%`, 0]
        }, 0);
      }
    }
  };
})();

Menu.init();

---

The Demo

Art by Elina