Button drop

<div class="dropbutton-wrapper dropbutton-multiple">
    <div class="dropbutton-widget">
        <ul class="no-style dropbutton">
            <li class="dropbutton-action">
                <input type="submit" name="op" value="Save and publish" class="button btn">
            </li>
            <li class="dropbutton-toggle">
                <button type="button">
          <span class="dropbutton-arrow"></span>
        </button>
            </li>
            <li class="dropbutton-action secondary-action">
                <input type="submit" name="op" value="Save as unpublished" class="button btn">
            </li>
        </ul>
    </div>
</div>
<div class="dropbutton-wrapper dropbutton-multiple">
  <div class="dropbutton-widget">
    <ul class="no-style dropbutton">
      <li class="dropbutton-action">
        <input type="submit" name="op" value="Save and publish" class="button btn">
      </li>
      <li class="dropbutton-toggle">
        <button type="button">
          <span class="dropbutton-arrow"></span>
        </button>
      </li>
      <li class="dropbutton-action secondary-action">
        <input type="submit" name="op" value="Save as unpublished" class="button btn">
      </li>
    </ul>
  </div>
</div>
{
  "text": "Submit",
  "modifier": "icon icon-search"
}
  • Content:
    .dropbutton-wrapper,
    .dropbutton-widget {
      display: inline-block;
      position: relative;
    }
    
    .dropbutton-widget {
      border-top-left-radius: $radius-1;
      border-bottom-left-radius: $radius-1;
      overflow: hidden;
    
      .dropbutton {
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style-image: none;
        list-style-type: none;
    
        .dropbutton-toggle {
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 2rem;
          border-left: 1px solid $color-light-gray;
          border-top-right-radius: $radius-1;
          border-bottom-right-radius: $radius-1;
          text-indent: 110%;
          white-space: nowrap;
          overflow: hidden;
    
          button {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
            cursor: pointer;
    
            &:hover,
            &:focus {
              outline: initial;
            }
    
            .dropbutton-arrow {
              display: block;
              position: absolute;
              top: 50%;
              right: 40%;
              width: 0;
              height: 0;
              margin-top: -.1666rem;
              border-width: .3333rem .3333rem 0;
              border-style: solid;
              border-right-color: transparent;
              border-bottom-color: transparent;
              border-left-color: transparent;
              line-height: 0;
              overflow: hidden;
    
              .dropbutton-multiple.open & {
                top: .6667rem;
                border-bottom: .3333rem solid;
                border-top-color: transparent;
              }
            }
          }
        }
      }
    }
    
    .dropbutton-wrapper {
      @include clearfix();
      min-height: 2.4rem;
    }
    
    .dropbutton-multiple {
      max-width: 100%;
    
      .dropbutton-widget {
        padding-right: 2rem;
      }
    
      input[type="button"],
      input[type="submit"],
      button {
        border-radius: 0;
      }
    
      &.open {
        z-index: 100;
    
        .dropbutton-widget {
          max-width: none;
        }
    
        .dropbutton .secondary-action {
          display: block;
        }
      }
    }
    
    .dropbutton li,
    .dropbutton a {
      display: block;
      outline: none;
    
      &:hover,
      &:focus {
        outline: initial;
      }
    }
    
    .dropbutton-multiple .dropbutton .secondary-action {
      display: none;
    }
    
    .dropbutton-action > .button,
    .dropbutton-action > .btn {
      text-align: left;
    }
    
  • URL: /components/raw/button-drop/_button-drop.scss
  • Filesystem Path: components/21-atoms/button-drop/_button-drop.scss
  • Size: 2.3 KB
  • Content:
    /**
     * @file
     * binding of button-drop.functions.js
     */
    
    'use strict';
    
    (function ($) {
      $(window).on('load', function (e) {
        $('.dropbutton-wrapper').dropButtonLoad();
      });
    
    })(jQuery);
    
  • URL: /components/raw/button-drop/button-drop.binding.js
  • Filesystem Path: components/21-atoms/button-drop/button-drop.binding.js
  • Size: 192 Bytes
  • Content:
    /**
     * @file
     * Implements a dropdown button.
     *
     * @author
     * Wim Vantomme
     *
     */
    'use strict';
    
    (function ($) {
      $.fn.extend({
    
        /**
         * Implements a jQuery extension function.
         *
         * @fires event:click
         */
        dropButtonLoad: function () {
          var dropButton = $(this);
          var dropButtonToggle = dropButton.find('.dropbutton-toggle button');
    
          /**
           * Opens or closes the drop-down botton on click.
           *
           * @event click
           */
          dropButtonToggle.on('click', function (e) {
            e.stopPropagation();
            if (dropButton.hasClass('open')) {
              dropButton.removeClass('open');
            }
            else {
              dropButton.addClass('open');
            }
          });
    
          /**
           * Closes the drop-down button
           *
           * @event click
           */
          $(document).on('click', function (e) {
            dropButton.removeClass('open');
          });
        }
      });
    })(jQuery);
    
  • URL: /components/raw/button-drop/button-drop.functions.js
  • Filesystem Path: components/21-atoms/button-drop/button-drop.functions.js
  • Size: 932 Bytes
  • Content:
    'use strict';
    
    (function ($) {
    
      /**
       * Invoked after after loading the initial page and after each AJAX request.
       *
       * @param context
       *   The DOM context.
       * @param settings
       *   Object of additional settings.
       */
      $(window).on('load', dropButtonLoad);
    
      /**
       * Replace the mobile breadcrumb of Gent base by our own.
       */
      function dropButtonLoad() {
        var dropButton = $('.dropbutton-wrapper');
        var dropButtonToggle = dropButton.find('.dropbutton-toggle button');
    
        dropButtonToggle.on('click', function (e) {
          e.stopPropagation();
          if (dropButton.hasClass('open')) {
            dropButton.removeClass('open');
          }
          else {
            dropButton.addClass('open');
          }
        });
    
        $(document).on('click', function (e) {
          dropButton.removeClass('open');
        });
    
      }
    
    })(jQuery);
    
  • URL: /components/raw/button-drop/button-drop.js
  • Filesystem Path: components/21-atoms/button-drop/button-drop.js
  • Size: 833 Bytes

Button drop

Information

A type of button used in Drupal 8. After implementing the JS files in your project you should get a button that works as a button / dropdown menu.

A description of how Drupal 8 uses this new type of button can be found here.

Implementation

To implement this in your own project you simply add the button-drop.bindings.js and button-drop.function.js file to your project and follow the correct markup example.