<a class="c-menu" href="#navigation">
    <svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <rect class="c-menu__line" width="120" height="10" x="40" y="45"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="70"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="95"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="120"/>
  <rect class="c-menu__line" width="120" height="10" x="40" y="145"/>
</svg>

    <span class="u-hidden">Jump to menu</span>
</a>
<a class="c-menu" href="#navigation">
  {% include "menu.svg" %}
  <span class="u-hidden">Jump to menu</span>
</a>
{
  "site": {
    "title": "24 ways",
    "handle": "24ways",
    "description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
    "url": "https://24ways.org",
    "feed": "https://feeds.feedburner.com/24ways",
    "theme_color": "#f04"
  },
  "theme": {
    "year": [
      348,
      344,
      340,
      336,
      332,
      328,
      324,
      320,
      316,
      312,
      308,
      304,
      300,
      296,
      292,
      288
    ],
    "day": [
      360,
      353,
      346,
      339,
      332,
      325,
      318,
      311,
      304,
      297,
      290,
      283,
      276,
      269,
      262,
      255,
      248,
      241,
      234,
      227,
      220,
      213,
      206,
      199
    ]
  }
}
  • Content:
    .c-menu {
      @apply --focusable;
      display: block;
      position: fixed;
      z-index: calc(map(layers, modal) + 1);
    
      @media (--upto-medium-screen) {
        top: map(sizes, xsmall);
        right: map(sizes, xsmall);
        color: white;
    
        &:hover,
        &:active {
          color: white;
        }
    
        [data-menu-expanded=true] & {
          color: $navigation-color--text;
        }
      }
    
      @media (--from-medium-screen) {
        @apply --navigation-link;
        top: 0;
        right: 0;
        padding: map(spaces, medium);
        box-shadow: inset 0 -1px 0 $navigation-color--offset;
      }
    
      @media print {
        display: none;
      }
    }
    
    .c-menu__icon {
      height: 2.5rem;
      width: 2.5rem;
    }
    
    .c-menu__line {
      transform-origin: 50% 50%;
    
      /* Transitions */
      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(5),
      &:nth-of-type(6) {
        opacity: 1;
        transition: transform 0.2s cubic-bezier(0.8, 0, 0.4, 1.8) 0.2s, opacity 0.05s linear 0.1s;
    
        [data-menu-expanded=true] & {
          opacity: 0;
          transition: transform 0.2s ease-out, opacity 0.05s linear 0.1s;
        }
      }
    
      &:nth-of-type(3),
      &:nth-of-type(4) {
        transition: transform 0.2s ease-out;
    
        [data-menu-expanded=true] & {
          transition: transform 0.2s cubic-bezier(0.8, 0, 0.4, 1.8) 0.2s;
        }
      }
    
      /* Transforms */
      [data-menu-expanded=true] & {
        &:nth-of-type(1) {
          transform: translateY(500%);
        }
    
        &:nth-of-type(2) {
          transform: translateY(250%);
        }
    
        &:nth-of-type(3) {
          transform: rotate(45deg) scaleX(1.3334);
        }
    
        &:nth-of-type(4) {
          transform: rotate(-45deg) scaleX(1.3334);
        }
    
        &:nth-of-type(5) {
          transform: translateY(-250%);
        }
    
        &:nth-of-type(6) {
          transform: translateY(-500%);
        }
      }
    }
    
  • URL: /components/raw/menu/menu.css
  • Filesystem Path: src/components/global/menu/menu.css
  • Size: 1.7 KB
  • Content:
    'use strict';
    
    (function (root, factory) {
      if (typeof module === 'object' && module.exports) {
        module.exports = factory(require('../../src/assets/scripts/utils/selection').$);
        module.exports = factory(require('../../src/assets/scripts/utils/focusing').$);
      } else {
        root.menu = factory(root.selection.$, root.focusing);
      }
    }(this, function ($, focusing) {
      const doc = this.document;
      const menuToggleEl = $('[href="#navigation"]');
      const menuButton = doc.createElement('button');
      const navigationDrawerEl = $('#navigation__drawer');
      const navigationDrawerID = navigationDrawerEl.id;
      const focusRegion = navigationDrawerEl;
    
      var previousFocusedElement;
    
      function handleKeypress(e) {
        focusing.bindKeypress(true, function () {
          handleRemoveFocus();
        }, focusRegion, e);
      }
    
      function handleMaintainFocus(e) {
        focusing.maintainFocus(true, focusRegion, e);
      }
    
      function handleSetFocus(e) {
        previousFocusedElement = focusing.safeActiveElement();
        focusing.setInitialFocus(focusRegion);
        doc.addEventListener('keydown', handleKeypress);
        doc.body.addEventListener('focus', handleMaintainFocus, true);
      }
    
      function handleRemoveFocus(e) {
        doc.removeEventListener('keydown', handleKeypress);
        doc.body.removeEventListener('focus', handleMaintainFocus, true);
        focusing.removeFocus(focusRegion);
        previousFocusedElement && previousFocusedElement.focus();
      }
    
      // Replace menu link with a `button`
      menuButton.classList = menuToggleEl.classList;
      menuButton.innerHTML = menuToggleEl.innerHTML;
      doc.body.replaceChild(menuButton, menuToggleEl);
    
      // Correct role for navigation drawer
      navigationDrawerEl.setAttribute('role', 'dialog');
      navigationDrawerEl.setAttribute('aria-labelledby', 'navigation__title');
      navigationDrawerEl.hidden = true;
    
      const toggleMenu = function (state) {
        menuButton.setAttribute('aria-expanded', state);
        doc.body.setAttribute('data-menu-expanded', state);
        navigationDrawerEl.setAttribute('aria-hidden', !state);
    
        if (state === 'true') {
          handleSetFocus();
          navigationDrawerEl.hidden = false;
        } else {
          handleRemoveFocus();
          navigationDrawerEl.hidden = true;
        }
      };
    
      if (menuToggleEl) {
        // Setup menu button ARIA attributes
        menuButton.setAttribute('aria-controls', navigationDrawerID);
        menuButton.setAttribute('aria-expanded', false);
    
        // Setup navigation drawer
        navigationDrawerEl.setAttribute('aria-hidden', true);
    
        // Toggle menu expanded/collapsed
        menuButton.addEventListener('click', (e) => {
          const state = menuButton.getAttribute('aria-expanded') === 'false' ? 'true' : 'false';
    
          toggleMenu(state);
    
          e.preventDefault();
        });
    
        // Close menu if escape key is pressed
        this.addEventListener('keyup', (e) => {
          if (e.keyCode === 27) {
            toggleMenu(false);
            handleRemoveFocus();
          }
        });
      }
    }));
    
  • URL: /components/raw/menu/menu.js
  • Filesystem Path: src/components/global/menu/menu.js
  • Size: 2.9 KB

There are no notes for this item.