CodePen Embed - circle menu

<nav id="c-circle-nav" class="c-circle-nav">
  <button id="c-circle-nav__toggle" class="c-circle-nav__toggle">
    <span>Toggle</span>
  </button>
  <ul class="c-circle-nav__items">
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cGF0aCBkPSJNNjkuOTQgNTEuMDZjLS4xNDcuMTc1LS4zODYuMjk3LS42MjUuMzIzaC0uMDg2Yy0uMjQgMC0uNDUtLjA2LS42My0uMjA3TDQ3Ljk5OCAzNGwtMjAuNiAxNy4xNzZjLS4yMS4xNDgtLjQ0OC4yNC0uNzE1LjIwNy0uMjM3LS4wMjYtLjQ3NS0uMTQ4LS42MjctLjMyNEwyNC4yMSA0OC44NWMtLjMyNy0uMzg1LS4yNjctMS4wMS4xMi0xLjM0bDIxLjQwMy0xNy44M2MxLjI1NC0xLjA0MyAzLjI3Ni0xLjA0MyA0LjUyNyAwbDcuMjY2IDYuMDc0VjI5Ljk1YzAtLjUzNy40MTgtLjk1My45NS0uOTUzaDUuNzE2Yy41NCAwIC45NTYuNDE3Ljk1Ni45NTN2MTIuMTQ2bDYuNTIgNS40MThjLjM5LjMyOC40NDMuOTU1LjEyIDEuMzRsLTEuODQ4IDIuMjA1ek02NS4xNDggNjUuMmMwIDEuMDQtLjg2NSAxLjktMS45MDYgMS45SDUxLjgwOFY1NS42NzJoLTcuNjJ2MTEuNDNoLTExLjQzYy0xLjA0MyAwLTEuOTA2LS44NjItMS45MDYtMS45VjUwLjkwNmMwLS4wNTUuMDMtLjExMy4wMy0uMThsMTcuMTE2LTE0LjExIDE3LjExOCAxNC4xMWMuMDMyLjA2Ni4wMzIuMTI1LjAzMi4xOFY2NS4yeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="
        alt="">
      </a>
    </li>

    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNNzAuMTI1IDM1LjQ3NWMtMS4yNS0xLjI1LTIuNzU4LTEuODc1LTQuNTI0LTEuODc1SDYwbC0xLjI3NC0zLjRjLS4zMTYtLjgxNy0uODk2LTEuNTItMS43MzctMi4xMTNzLTEuNzA3LS44ODctMi41OS0uODg3SDQxLjZjLS44ODQgMC0xLjc0Ni4yOTYtMi41ODguODg4cy0xLjQyIDEuMjk2LTEuNzM3IDIuMTEzTDM2IDMzLjZoLTUuNmMtMS43NjcgMC0zLjI3NS42MjUtNC41MjUgMS44NzVDMjQuNjI1IDM2LjcyNSAyNCAzOC4yMzMgMjQgNDB2MjIuNGMwIDEuNzY3LjYyNSAzLjI3NSAxLjg3NSA0LjUyNCAxLjI1IDEuMjUgMi43NTggMS44NzYgNC41MjUgMS44NzZoMzUuMmMxLjc2OCAwIDMuMjc1LS42MjUgNC41MjUtMS44NzZDNzEuMzc1IDY1LjY3NiA3MiA2NC4xNjcgNzIgNjIuNFY0MGMwLTEuNzY3LS42MjUtMy4yNzUtMS44NzUtNC41MjV6TTU1LjkxMyA1OS4xMTNDNTMuNzIgNjEuMzA1IDUxLjA4MyA2Mi40IDQ4IDYyLjRzLTUuNzItMS4wOTYtNy45MTMtMy4yODdTMzYuOCA1NC4yODMgMzYuOCA1MS4yYzAtMy4wODMgMS4wOTUtNS43MiAzLjI4Ny03LjkxMlM0NC45MTcgNDAgNDggNDBzNS43MiAxLjA5NiA3LjkxMyAzLjI4OGMyLjE5IDIuMTkgMy4yODcgNC44MyAzLjI4NyA3LjkxM3MtMS4wOTYgNS43Mi0zLjI4NyA3LjkxM3pNNDggNDRjLTEuOTgzIDAtMy42OC43MDQtNS4wODggMi4xMTMtMS40MDggMS40MS0yLjExMiAzLjEwNC0yLjExMiA1LjA4OCAwIDEuOTgzLjcwNCAzLjY4IDIuMTEyIDUuMDg4QzQ0LjMyMiA1Ny42OTYgNDYuMDE3IDU4LjQgNDggNTguNHMzLjY4LS43MDQgNS4wODgtMi4xMTJDNTQuNDk2IDU0Ljg4IDU1LjIgNTMuMTg0IDU1LjIgNTEuMmMwLTEuOTgzLS43MDQtMy42OC0yLjExMi01LjA4N0M1MS42NzggNDQuNzAzIDQ5Ljk4MyA0NCA0OCA0NHoiLz48L2c+PC9zdmc+"
        alt="">
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNTkuMzEzIDI4LjY4OEM1Ni4xODYgMjUuNTYyIDUyLjQxNyAyNCA0Ny45OTggMjRjLTQuNDE2IDAtOC4xODcgMS41NjItMTEuMzEyIDQuNjg4QzMzLjU2IDMxLjgxMyAzMiAzNS41ODMgMzIgMzkuOTk4YzAgMi4yNzIuMzQyIDQuMTM3IDEuMDMgNS41OTdMNDQuNDM1IDY5Ljc4Yy4zMTMuNjkuNzk3IDEuMjMgMS40NTMgMS42My42NTcuMzkgMS4zNi41OSAyLjExLjU5Ljc1IDAgMS40NTUtLjIgMi4xMS0uNTkyLjY1Ny0uMzk4IDEuMTUtLjkzOCAxLjQ4My0xLjYzbDExLjM4LTI0LjE4M0M2My42NTUgNDQuMTM1IDY0IDQyLjI3IDY0IDQwYzAtNC40MTctMS41NjQtOC4xODctNC42ODctMTEuMzEyem0tNS42NiAxNi45NjhDNTIuMDk0IDQ3LjIxOCA1MC4yMSA0OCA0OCA0OGMtMi4yMDggMC00LjA5My0uNzgyLTUuNjU1LTIuMzQ0QzQwLjc4IDQ0LjA5NCA0MCA0Mi4yMDggNDAgNDBjMC0yLjIwOC43OC00LjA5NCAyLjM0My01LjY1NUM0My45MDUgMzIuNzggNDUuNzkgMzIgNDcuOTk4IDMyYzIuMjEgMCA0LjA5Ny43OCA1LjY1NiAyLjM0NSAxLjU2MiAxLjU2MiAyLjM0NCAzLjQ0NyAyLjM0NCA1LjY1NHMtLjc4IDQuMDk0LTIuMzQ0IDUuNjU2eiIvPjwvc3ZnPg=="
        alt="">
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNzAuOTM1IDY1LjcxbC05Ljg5Ni05Ljg5NGMyLjM4NS0zLjQ0IDMuNTc3LTcuMjc3IDMuNTc3LTExLjUwOCAwLTIuNzUtLjUzNi01LjM4LTEuNi03Ljg5LTEuMDctMi41MS0yLjUxNS00LjY3My00LjMzLTYuNDktMS44MTUtMS44MTctMy45OC0zLjI2LTYuNDktNC4zMjctMi41MS0xLjA2OC01LjE0LTEuNi03Ljg5LTEuNnMtNS4zOC41My03Ljg5IDEuNmMtMi41MSAxLjA2Ni00LjY3IDIuNTEtNi40OSA0LjMyNy0xLjgxNiAxLjgxNy0zLjI2IDMuOTgtNC4zMjYgNi40OS0xLjA2NyAyLjUxLTEuNiA1LjE0Mi0xLjYgNy44OTJzLjUzMyA1LjM3OCAxLjYwMiA3Ljg4N2MxLjA2NiAyLjUxIDIuNTEgNC42NzYgNC4zMjcgNi40OXMzLjk4IDMuMjYgNi40OSA0LjMzYzIuNTEgMS4wNjQgNS4xNCAxLjYgNy44OSAxLjYgNC4yMyAwIDguMDY4LTEuMTkgMTEuNTA3LTMuNTc3bDkuODk1IDkuODYyYy42OTIuNzMyIDEuNTU4IDEuMDk4IDIuNiAxLjA5OC45OTUgMCAxLjg2NC0uMzY1IDIuNTkyLTEuMDk4LjczLS43MjcgMS4wOTYtMS41OTYgMS4wOTYtMi41OTIgMC0xLjAyLS4zNTMtMS44ODUtMS4wNjUtMi42ek01My40NCA1My40NGMtMi41MyAyLjUyNy01LjU3NSAzLjc5My05LjEzMiAzLjc5My0zLjU2IDAtNi42LTEuMjY1LTkuMTMtMy43OTItMi41MjgtMi41My0zLjc5NC01LjU3My0zLjc5NC05LjEzIDAtMy41NiAxLjI2Ni02LjYgMy43OTQtOS4xMyAyLjUzLTIuNTI4IDUuNTctMy43OTQgOS4xMy0zLjc5NCAzLjU1OCAwIDYuNiAxLjI2NiA5LjEzIDMuNzk0IDIuNTI3IDIuNTMgMy43OTMgNS41NyAzLjc5MyA5LjEzIDAgMy41NTgtMS4yNjQgNi42LTMuNzkgOS4xM3oiLz48L3N2Zz4="
        alt="">
      </a>
    </li>
    <li class="c-circle-nav__item">
      <a href="#" class="c-circle-nav__link">
        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNNDUuMDMyIDQyLjU3M2wtMTkuOTIgMTkuOTJjLS43NC43NC0xLjExMiAxLjYzLTEuMTEyIDIuNjYgMCAxLjA1Ni4zNyAxLjkzMiAxLjExMyAyLjYzNWwzLjEgMy4xNTdjLjc2LjcyNCAxLjY0NyAxLjA4NCAyLjY2IDEuMDg0IDEuMDM0IDAgMS45MTItLjM2IDIuNjMzLTEuMDg1bDE5Ljk1LTE5Ljk0OGMtMS45MS0uNzYtMy42MDMtMS44NzUtNS4wNzUtMy4zNS0xLjQ3LTEuNDctMi41OS0zLjE2Mi0zLjM0OC01LjA3NHpNMzQuMDYyIDY0LjZjLS4zNy4zNy0uODEuNTU0LTEuMzE2LjU1NC0uNTA3IDAtLjk0Ni0uMTgzLTEuMzE2LS41NTMtLjM3LS4zNy0uNTU2LS44MS0uNTU2LTEuMzE2cy4xODUtLjk0Ny41NTYtMS4zMTdjLjM3LS4zNy44MS0uNTU1IDEuMzE2LS41NTVzLjk0Ni4xODUgMS4zMTcuNTU1Yy4zNy4zNy41NTUuODEyLjU1NSAxLjMxN3MtLjE4NC45NDYtLjU1NSAxLjMxN3pNNzEuNzUzIDM3LjU0M2MtLjE2OC0uMTk1LS4zOTYtLjI5Mi0uNjg4LS4yOTItLjE3NCAwLS44NjMuMzQ2LTIuMDYyIDEuMDQtMS4yLjY5LTIuNTIgMS40OC0zLjk2NCAyLjM3bC0yLjMxIDEuNDE3LTUuNjQ4LTMuMTN2LTYuNTVsOC41Ny00Ljk0NWMuMzEzLS4yMTUuNDY4LS40ODYuNDY4LS44MiAwLS4zMy0uMTU0LS42MDMtLjQ2OC0uODE4LS44NTgtLjU4NS0xLjkwNC0xLjA0LTMuMTQ0LTEuMzYtMS4yMzgtLjMyMy0yLjQyMi0uNDgyLTMuNTU0LS40ODItMy42MDcgMC02LjY5MiAxLjI4My05LjI1NiAzLjg0Ni0yLjU2NiAyLjU2NS0zLjg0OCA1LjY1LTMuODQ4IDkuMjU4IDAgMy42MDYgMS4yODMgNi42OTQgMy44NDggOS4yNTcgMi41NjMgMi41NjUgNS42NDggMy44NDYgOS4yNTYgMy44NDYgMi43NSAwIDUuMjctLjgxNSA3LjU2My0yLjQ0MyAyLjI4OC0xLjYzIDMuODk0LTMuNzUgNC44MS02LjM2Mi40NS0xLjMxLjY3My0yLjM0LjY3My0zLjEwMi4wMDItLjI5Mi0uMDgyLS41MzYtLjI0Ny0uNzN6Ii8+PC9nPjwvc3ZnPg=="
        alt="">
      </a>
    </li>
    <!-- more items here -->
  </ul>
</nav>

.c-circle-nav {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 24px;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav {
    width: 96px;
    height: 96px;
    border-radius: 48px;
  }
}

.c-circle-nav__items {
  display: block;
  list-style: none;
  position: absolute;
  z-index: 90;
  margin: 0;
  padding: 0;
}

.c-circle-nav__item {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  opacity: 0;
  -webkit-transition-property: -webkit-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transition-duration: 0.3s, 0.3s;
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97);
  transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97);
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__item {
    width: 96px;
    height: 96px;
    border-radius: 48px;
  }
}
/**
* Transisition delays at the default state.
*/

.c-circle-nav__item:nth-child(1) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.c-circle-nav__item:nth-child(2) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.c-circle-nav__item:nth-child(3) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.c-circle-nav__item:nth-child(4) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.c-circle-nav__item:nth-child(5) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
/**
* We're using the .is-active class, which is added to the nav via JavaScript.
* Once the nav is active, the items inherit the properties below. We will
* manually write out the transform properties for first and last items, as we
* already know their position. For all items in between though, we'll use some
* polar-to-cartesian math and some Sass functions to get the positioning.
*/

.c-circle-nav.is-active .c-circle-nav__item {
  -webkit-transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59);
  transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59);
}

.c-circle-nav.is-active .c-circle-nav__item:nth-child(1) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(-144px, 0);
  -ms-transform: translate(-144px, 0);
  transform: translate(-144px, 0);
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav.is-active .c-circle-nav__item: nth-child(1) {
    -webkit-transform: translate(-288px, 0);
    -ms-transform: translate(-288px, 0);
    transform: translate(-288px, 0);
  }
}

.c-circle-nav.is-active .c-circle-nav__item:nth-child(2) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -webkit-transform: translate(-134px, -56px);
  -ms-transform: translate(-134px, -56px);
  transform: translate(-134px, -56px);
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav.is-active .c-circle-nav__item: nth-child(2) {
    -webkit-transform: translate(-267px, -111px);
    -ms-transform: translate(-267px, -111px);
    transform: translate(-267px, -111px);
  }
}

.c-circle-nav.is-active .c-circle-nav__item:nth-child(3) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transform: translate(-102px, -102px);
  -ms-transform: translate(-102px, -102px);
  transform: translate(-102px, -102px);
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav.is-active .c-circle-nav__item: nth-child(3) {
    -webkit-transform: translate(-204px, -204px);
    -ms-transform: translate(-204px, -204px);
    transform: translate(-204px, -204px);
  }
}

.c-circle-nav.is-active .c-circle-nav__item:nth-child(4) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transform: translate(-56px, -134px);
  -ms-transform: translate(-56px, -134px);
  transform: translate(-56px, -134px);
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav.is-active .c-circle-nav__item: nth-child(4) {
    -webkit-transform: translate(-111px, -267px);
    -ms-transform: translate(-111px, -267px);
    transform: translate(-111px, -267px);
  }
}

.c-circle-nav.is-active .c-circle-nav__item:nth-child(5) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -webkit-transform: translate(0, -144px);
  -ms-transform: translate(0, -144px);
  transform: translate(0, -144px);
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav.is-active .c-circle-nav__item: nth-child(5) {
    -webkit-transform: translate(0, -288px);
    -ms-transform: translate(0, -288px);
    transform: translate(0, -288px);
  }
}
/**
* Apart from the transform properties, we'll also make sure the items get
* the correct opacity.
*/

.c-circle-nav.is-active .c-circle-nav__item {
  opacity: 1;
}
/**
* Let's style the links now. This is just boilerplate stuff, and of course,
* you'll probably want to change up the icons to match your needs. In any case,
* we'll do it here for the sake of completion.
*/

.c-circle-nav__link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  box-shadow: inset 0 0 0 2px #fff;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__link {
    border-radius: 48px;
  }
}

.c-circle-nav__link img {
  display: block;
  max-width: 100%;
  height: auto;
}

.c-circle-nav__link:hover {
  box-shadow: inset 0 0 0 2px #ff283c;
}
/* -----------------------------------------------------------------------------
THE TOGGLE COMPONENT
----------------------------------------------------------------------------- */
/**
* The toggle is a button element, and as such requires some resets that are
* unique to buttons. This button also inherits some funky stuff from my
* CSS animating hamburger menu icons demo, which can be found at this url:
* https://github.com/callmenick/Animating-Hamburger-Icons
*/

.c-circle-nav__toggle {
  display: block;
  position: absolute;
  z-index: 100;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  background-color: #ff283c;
  font: inherit;
  font-size: 0;
  text-indent: -9999px;
  border-radius: 24px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  /* reset some browser defaults */
  
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__toggle {
    width: 96px;
    height: 96px;
    border-radius: 48px;
  }
}

.c-circle-nav__toggle:hover,
.c-circle-nav__toggle:focus,
.c-circle-nav__toggle.is-active {
  outline: none;
  background-color: #c10012;
}

.c-circle-nav__toggle span,
.c-circle-nav__toggle span::before,
.c-circle-nav__toggle span::after {
  display: block;
  position: absolute;
  height: 4px;
  background: #fff;
  border-radius: 1px;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__toggle span, .c-circle-nav__toggle span::before, .c-circle-nav__toggle span::after {
    height: 8px;
    border-radius: 2px;
  }
}

.c-circle-nav__toggle span {
  top: 22px;
  left: 10px;
  right: 10px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__toggle span {
    top: 44px;
    left: 20px;
    right: 20px;
  }
}

.c-circle-nav__toggle span::before,
.c-circle-nav__toggle span::after {
  left: 0;
  width: 100%;
  content: "";
  -webkit-transition-duration: 0.3s, 0.3s;
  transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
  transition-delay: 0.3s, 0s;
}

.c-circle-nav__toggle span::before {
  top: -8px;
  -webkit-transition-property: top, -webkit-transform;
  transition-property: top, transform;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__toggle span::before {
    top: -16px;
  }
}

.c-circle-nav__toggle span::after {
  bottom: -8px;
  -webkit-transition-property: bottom, -webkit-transform;
  transition-property: bottom, transform;
}

@media (min-width: 480px) and (min-height: 480px) {
  .c-circle-nav__toggle span::after {
    bottom: -16px;
  }
}
/* button active state */

.c-circle-nav__toggle.is-active span {
  background: none;
}

.c-circle-nav__toggle.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition-delay: 0s, 0.3s;
  transition-delay: 0s, 0.3s;
}

.c-circle-nav__toggle.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition-delay: 0s, 0.3s;
  transition-delay: 0s, 0.3s;
}
/* -----------------------------------------------------------------------------
THE MASK COMPONENT
----------------------------------------------------------------------------- */
/**
* Here's the mask component, which actually gets created and inserted to the
* DOM via JavaScript. It simply acts as an overlay to draw attention to the
* navigation when it is active. It also uses the .is-acvite state class.
*/

.c-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
}

.c-mask.is-active {
  opacity: 1;
  visibility: visible;
}

(function() {

  "use strict";

  /**
   * Cache variables
   */
  var menu = document.querySelector("#c-circle-nav");
  var toggle = document.querySelector("#c-circle-nav__toggle");
  var mask = document.createElement("div");
  var activeClass = "is-active";

  /**
   * Create mask
   */
  mask.classList.add("c-mask");
  document.body.appendChild(mask);

  /**
   * Listen for clicks on the toggle
   */
  toggle.addEventListener("click", function(e) {
    e.preventDefault();
    toggle.classList.contains(activeClass) ? deactivateMenu() : activateMenu();
  });

  /**
   * Listen for clicks on the mask, which should close the menu
   */
  mask.addEventListener("click", function() {
    deactivateMenu();
    console.log('click');
  });

  /**
   * Activate the menu 
   */
  function activateMenu() {
    menu.classList.add(activeClass);
    toggle.classList.add(activeClass);
    mask.classList.add(activeClass);
  }

  /**
   * Deactivate the menu 
   */
  function deactivateMenu() {
    menu.classList.remove(activeClass);
    toggle.classList.remove(activeClass);
    mask.classList.remove(activeClass);
  }

})();

This Pen is owned by Pierre on CodePen.

See more by @Piewe on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.