<nav class="hamburger-menu visible-mobile header-component">
    <button class="hamburger-menu__toggle">Menu</button>
    <div class="hamburger-menu__overlay"></div>
    <div class="hamburger-menu__drawer" tabindex="-1">
        <a href="javascript:void(0);" class="close">Sluit menu <i class="icon-cross"></i></a>
        <ul class="no-style">
            <li><a href='javascript:void(0);'>Menu item 1</a></li>
            <li><a href='javascript:void(0);' class='active'>Menu item 2</a></li>
            <li><a href='javascript:void(0);'>Menu item 3</a></li>
            <li><a href='javascript:void(0);'>Menu item 4</a></li>
        </ul>
    </div>
</nav>
<nav class="hamburger-menu visible-mobile header-component">
  <button class="hamburger-menu__toggle">{{ 'Menu' }}</button>
  <div class="hamburger-menu__overlay"></div>
  <div class="hamburger-menu__drawer" tabindex="-1">
    <a href="javascript:void(0);" class="close">{{ 'Sluit menu'}} <i class="icon-cross"></i></a>
    {% include '@list' with {'modifier': 'no-style'} %}
  </div>
</nav>
{
  "items": [
    "<a href='javascript:void(0);'>Menu item 1</a>",
    "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
    "<a href='javascript:void(0);'>Menu item 3</a>",
    "<a href='javascript:void(0);'>Menu item 4</a>"
  ]
}
  • Content:
    .hamburger-menu {
      @include themify() {
        &__drawer {
          background-color: $hamburger-menu-background;
          color: $hamburger-menu-link-color;
    
          a {
            @include element-states($hamburger-menu-link-color, $hamburger-menu-link-color-hover, $property: "color");
            @include element-states($hamburger-menu-link-background, $hamburger-menu-link-background-hover, $property: "background-color");
            @include element-states(0, thin dotted, $property: "outline");
    
            border-bottom: $hamburger-menu-link-border;
    
            &.active {
              border-bottom: $hamburger-menu-link-border-active;
              background-color: $hamburger-menu-link-background-active;
              color: $hamburger-menu-link-color-active;
            }
    
            &.close {
              @include element-states($hamburger-menu-link-color, $hamburger-menu-link-color-hover, $property: "color");
            }
          }
        }
    
        &__overlay.js-opened {
          background: $hamburger-menu-overlay-color;
        }
      }
    
      &__drawer {
        position: fixed;
        top: 0;
        left: -$hamburger-menu-width;
        width: $hamburger-menu-width;
        max-width: 100%;
        height: 100%;
        transition: left.5s cubic-bezier(0, 1, .5, 1);
        overflow: auto;
        z-index: 9999;
    
        &.js-opened {
          left: 0;
          box-shadow: $hamburger-menu-shadow;
        }
    
        ul {
          @extend %list-no-style;
          margin: 0;
        }
    
        a {
          display: block;
          padding-right: .8rem;
          padding-left: .8rem;
          font-weight: bold;
          line-height: 3.48em;
    
          &:hover,
          &:focus {
            text-decoration: none !important; // sass-lint:disable-line no-important
          }
    
          &.close {
            border: 0;
            text-align: right;
    
            i {
              padding-left: .7rem;
            }
          }
        }
      }
    
      &__overlay.js-opened {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9998;
      }
    
      button.hamburger-menu__toggle {
        @include btn-s;
    
        &::before {
          @extend %icon-base-css;
          @extend %icon-menu;
          position: relative;
          top: .1rem;
          margin-right: .5rem;
        }
      }
    }
    
  • URL: /components/raw/hamburger-menu/_hamburger-menu.scss
  • Filesystem Path: components/31-molecules/building-blocks/hamburger-menu/_hamburger-menu.scss
  • Size: 2.1 KB
  • Content:
    /**
     * @file
     * Javascript binding of hamburger-menu.functions.js.
     */
    
    'use strict';
    
    (function ($) {
      $(window).on('load', function (e) {
        var $hamburgerMenu = $('.hamburger-menu');
    
        if ($hamburgerMenu.length > 0) {
          $hamburgerMenu.loadHamburgerMenu();
        }
      });
    
    })(jQuery);
    
  • URL: /components/raw/hamburger-menu/hamburger-menu.binding.js
  • Filesystem Path: components/31-molecules/building-blocks/hamburger-menu/hamburger-menu.binding.js
  • Size: 293 Bytes
  • Content:
    /**
     * @file
     * Implements a hamburger-menu button combined with
     * a slide-in panel for easy mobile navigation.
     *
     * @authors
     * Wim Vantomme
     * Bart Delrue
     *
     */
    
    'use strict';
    
    (function ($) {
    
      $.fn.extend({
    
        /**
         * Creates a jQuery extension function.
         *
         * @fires event:click
         */
        loadHamburgerMenu: function () {
          var $drawer = $(this[0]).find('.hamburger-menu__drawer');
          var $closeBtn = $drawer.find('.close');
          var $overlay = $('.hamburger-menu__overlay');
          var trigger;
    
          if (typeof gent_styleguide === 'undefined') {
            console.error('You need to include base.js.'); // eslint-disable-line no-console
            return;
          }
    
          // TabTrap doens't use jquery opbjects.
          var tabTrap = new gent_styleguide.TabTrap($drawer[0]); // eslint-disable-line no-undef
    
          /**
           * Closes the hamburger menu
           *
           * @param {event} e onclick or keydown:escape
           */
          var close = function (e) {
            if (e) {
              e.preventDefault();
            }
            $drawer.removeClass('js-opened');
            $overlay.removeClass('js-opened');
            document.removeEventListener('keydown', handleKeyboardInput);
            tabTrap.reset();
    
            // return focus to the trigger
            if (trigger) {
              trigger.focus();
              trigger.setAttribute('aria-expanded', false);
            }
    
            // remove the menu from the tabindex
            // jquery .css() doesn't now 'important'
            setTimeout(function () {
              $drawer.attr('style', 'display: none');
            }, 500);
          };
    
          /**
           * Opens the hamburger menu
           *
           * @param {event} e onclick
           */
          var open = function (e) {
            if (e) {
              e.preventDefault();
            }
    
            // add the menu to the tabindex
            // jquery .css() doesn't now 'important'
            $drawer.attr('style', 'display: block');
    
            setTimeout(function () {
              $drawer.addClass('js-opened');
              $overlay.addClass('js-opened');
            });
    
    
            // remember the trigger
            trigger = e.target;
            trigger.setAttribute('aria-expanded', true);
    
            // set focus to the menu
            $drawer.focus();
    
            // handle keyboard input
            document.addEventListener('keydown', handleKeyboardInput);
          };
    
          /**
           * Handle keyboard input
           *
           * @param {object} e event
           */
          var handleKeyboardInput = function (e) {
    
            if (!tabTrap || !tabTrap.hasFocusables || !e) {
              return;
            }
    
            var keyCode = e.keyCode || e.which;
    
            switch (keyCode) {
              case 9: // tab
                e.preventDefault();
                if (e.shiftKey) {
                  tabTrap.back();
                }
                else {
                  tabTrap.next();
                }
                break;
              case 40: // arrow down
              case 39: // arrow right
                e.preventDefault();
                tabTrap.next();
                break;
              case 38: // arrow up
              case 37: // arrow left
                e.preventDefault();
                tabTrap.back();
                break;
              case 36: // home
                e.preventDefault();
                tabTrap.home();
                break;
              case 35: // end
                e.preventDefault();
                tabTrap.end();
                break;
              case 27: // esc
                close(e);
                break;
            }
          };
    
          /**
           * Indicates that a user has clicked on the hamburger toggle.
           *
           * Opens the overlay and hamburgerMenu.
           *
           * @event click
           */
          $('.hamburger-menu__toggle').on('click', open);
    
    
          /**
           * Indicates that a user has clicked on the closeBtn hamburger menu
           * toggle.
           *
           * Closes the overlay and hamburgerMenu.
           *
           * @event click
           */
          $closeBtn.add($overlay).on('click', close);
    
          // init the menu as closed on startup
          close();
        }
      });
    })(jQuery);
    
  • URL: /components/raw/hamburger-menu/hamburger-menu.functions.js
  • Filesystem Path: components/31-molecules/building-blocks/hamburger-menu/hamburger-menu.functions.js
  • Size: 4 KB

Hamburger menu

General

In the styleguide a hamburger menu on desktop is allowed. The context of the implementation of this styleguide should specify when a hamburger is rendered (eg. the organism which uses the hamburger- menu molecule).

This means that the Hamburger-menu cannot define its responsive behaviour on it self but only in relation to a bigger organism.

Javascript

This is a Javascript enabled molecule. Please check the [javascript documentation] (../../docs/javascript) on how to implement this correctly in your project.