Flyout
ready

Introduction

Allows for content that can be hidden by default and opened over/above other content on the page by the user.

Examples

Click behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="click">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Click-Sticky behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="click-sticky">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Focus behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="focus">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Hover behaviour

Export 
<div class="fly-out" data-js="fly-out" data-fly-out-event-type="hover">
      <a href="#" class="btn btn--tertiary btn--xsmall" data-js="fly-out-toggle">
        <span>Export</span><span class="icon icon--down-grey icon--down-hover-blue"></span>
      </a>
      <div data-js="fly-out-content" class="fly-out__content">
        <nav class="nav nav--chrome">
          <ul class="nav__list nav__list--chrome">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome"><span class='no-wrap'><span class='icon icon--doc-grey'></span><span>.PDF</span></span></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

Dependencies

  • src/scripts/modules/jquery.pfFlyOut.js
  • src/scripts/modules/jquery.pfHelpers.js
  • src/styles/base/*.scss
  • src/styles/components/blocks/_fly-out.scss
  • src/styles/components/blocks/_nav.scss
  • src/styles/components/elements/_icon.scss
  • src/styles/images.scss

Usage

Class/JavaScript Hook Description Required?
[data-js='fly-out'] and .fly-out Placed on outer-most tag that will contain the fly out. Required
[data-js='fly-out-toggle'] and .fly-out__toggle Placed on the tag that will open the fly out when interacted with by user. Note: .fly-out__toggle is only needed when the element is not a link. Required
.fly-out__content Placed on the tag that wraps the fly out content. Required
[data-fly-out-event-type='click|click-sticky|focus|hover'] Placed on the tag that wraps the fly out content. Specifies the event type that opens the fly out. 'click-sticky' means the user must click on the toggle again to close it. Required
[data-fly-out-position='center'] Placed on the tag that wraps the fly out content and will force the flyout to be centered within the toggle. Optional