menu

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

Feature discovery prompts have more impact when they are presented to the right users at contextually relevant moments. When presented to the wrong user at the wrong time, they can be intrusive and annoying.

Open tap target     Close tap target

You can also add blur-bg class to the .tap-target element to add the blur background effect or use blur-bg acrylic if you want the acrylic effect.

Add Blur Background   Remove Blur Background
Add Acrylic Blur Background   Remove Acrylic Blur Background

menu
I am here

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

          Copied!
          content_copy
          
  <!-- Element Showed -->
  <a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>

  <!-- Tap Target Structure -->
  <div class="tap-target" data-target="menu">
    <div class="tap-target-content">
      <h5>Title</h5>
      <p>A bunch of text</p>
    </div>
  </div>

Initialization

          Copied!
          content_copy
          
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tap-target');
    var instances = M.TapTarget.init(elems, {
      // specify options here
    });
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.tap-target').tapTarget({
      // specify options here
    });
  });

Options

Name Type Default Description
onOpen Function null Callback function called when Tap Target is opened.
onClose Function null Callback function called when Tap Target is closed.

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: 

              Copied!
              content_copy
              
  var instance = M.TapTarget.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.tap-target').tapTarget('methodName');
    $('.tap-target').tapTarget('methodName', paramName);
  */
.open();

Open Tap Target


  instance.next();
  instance.next(3); // Move next n times.

.close();

Close Tap Target


  instance.close();

.destroy();

Destroy plugin instance and teardown


  instance.destroy();

Properties

Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.
isOpen Boolean If the tap target is open.