poly-web-ui 1.5.0-dev

Hamburger Menu component

Hamburger menus positioned outside of the viewport and slide in when activated.

Example

html 
<header class="hamburger-header">
   <button type="button" class="hamburger-close" alt="close" data-close>
      <i class="icon icon-menu" data-open="offCanvasLeft"></i>
   </button>
</header>
<i class="shopheader-mobile__hamburger" data-open="offCanvasLeft"><span></span></i>
<div class="off-canvas-wrapper">
   <div class="off-canvas-wrapper-inner">
      <div class="hamburger off-canvas position-left" id="offCanvasLeft" data-off-canvas data-content-scroll="false">
         <ul class="vertical menu drilldown" data-drilldown data-hamburger>
            <li class="hamburger-item">
               <div class="hamburger-item__link">
                  <a href="#">entry 1</a>
               </div>
               <a tabindex="0"></a>
               <ul class="menu hamburger-subnav">
                  <li class="hamburger-item is-header js-drilldown-back">
                     <div class="hamburger-item__link">
                        <a tabindex="0">
                        entry 1
                        </a>
                     </div>
                  </li>
                  <li class="hamburger-item">
                     <div class="hamburger-item__link">
                        <a href="#">enty 1.1</a>
                     </div>
                     <a tabindex="0"></a>
                  </li>
                  <li class="hamburger-item">
                     <div class="hamburger-item__link">
                        <a href="#">entry 1.2</a>
                     </div>
                     <a tabindex="0"></a>
                  </li>
                  <li class="hamburger-item">
                     <div class="hamburger-item__link">
                        <a href="#">entry 1.3</a>
                     </div>
                     <a tabindex="0"></a>
                  </li>
               </ul>
            </li>
            <li class="hamburger-item">
               <div class="hamburger-item__link">
                  <a href="#">entry 2</a>
               </div>
               <a tabindex="0"></a>
               <ul class="menu hamburger-subnav">
                  <li class="hamburger-item is-header js-drilldown-back">
                     <div class="hamburger-item__link">
                        <a tabindex="0">
                        entry 2
                        </a>
                     </div>
                  </li>
                  <li class="hamburger-item">
                     <div class="hamburger-item__link">
                        <a href="#">entry 2.1</a>
                     </div>
                     <a tabindex="0"></a>
                  </li>
                  <li class="hamburger-item">
                     <div class="hamburger-item__link">
                        <a href="#">entry 2.2</a>
                     </div>
                     <a tabindex="0"></a>
                  </li>
               </ul>
            </li>
            <li class="hamburger-item">
               <a href="#">entry 3</a>
            </li>
            <li class="hamburger-item">
               <a href="#">entry 4</a>
            </li>
            <div class="hamburger-footer">
               <li class="hamburger-item">
                  <a href="#">entry 5</a>
               </li>
               <li class="hamburger-item">
                  <a href="#">entry 6</a>
            </div>
         </ul>
      </div>
   </div>
</div>
<div style="height:400px;"><!--- dummy page content ---></div>

Variables

$hamburger-background (Color)

scss 
$hamburger-background: $dark-gray !default;

Background color of an hamburger menu.

$hamburger-transition-length (Number)

scss 
$hamburger-transition-length: 0.3s !default;

Length of the animation on an hamburger menu.

$hamburger-transition-timing (Keyword)

scss 
$hamburger-transition-timing: ease !default;

Timing function of the animation on an hamburger menu.

$hamburger-border-color (Color)

scss 
$hamburger-border-color: rgba($white, .1) !default;

Border color of an hamburger menu.

$hamburger-padding (Number)

scss 
$hamburger-padding: $global-padding !default;

Padding of hamburger content.

$hamburger-nav-item-border-color (Color)

scss 
$hamburger-nav-item-border-color: $hamburger-border-color !default;

Border color of an hamburger navigation item.

$hamburger-font-color (Color)

scss 
$hamburger-font-color: $white !default;

Font color of an hamburger menu.

$hamburger-font-size (Number)

scss 
$hamburger-font-size: rem-calc(15) !default;

Font size of hamburger menu.

$hamburger-header-background (Color)

scss 
$hamburger-header-background: $black !default;

Background color of an hamburger header.

$hamburger-header-height (Number)

scss 
$hamburger-header-height: rem-calc(50) !default;

Height of hamburger header.

$hamburger-footer-background (Color)

scss 
$hamburger-footer-background: $black !default;

Background color of an hamburger footer.

$hamburger-nav-item-height (Number)

scss 
$hamburger-nav-item-height: rem-calc(50) !default;

Height of hamburger navigation item.

$hamburger-nav-header-background (Color)

scss 
$hamburger-nav-header-background: $primary-color !default;

Background color of an hamburger navigation header.

$hamburger-close-color (Color)

scss 
$hamburger-close-color: $hamburger-font-color !default;

Font color of close icon.