Material Inspired Floating Popup Menu

Preview:

Description:

A Material Design inspired floating popup menu which comes with 4 animations and can be placed anywhere on the webpage.

The open/close action is performed by toggling an attribute on the menu main element.

Basic usage:

Place the Material floating button’s style sheet and JavaScript in the html page.

<link href="dist/mfb.css" rel="stylesheet">
<script src="dist/mfb.js"></script>

Or install it via NPM.

npm install mfb --save

Create the floating popup menu following the html markup as follows:

• mfb-component–br: position classes: mfb-component–tl, mfb-component–br, mfb-component–tr, mfb-component–bl
• mfb-zoomin: animations: mfb-zoomin, mfb-slidein, mfb-slidein-spring and mfb-fountain
• data-mfb-toggle=”hover”: toggle event. Change to click to open the menu by click instead.

<ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
  <li class="mfb-component__wrap">
    <a href="#" class="mfb-component__button--main">
      <i class="mfb-component__main-icon--resting ion-plus-round"></i>
      <i class="mfb-component__main-icon--active ion-close-round"></i>
    </a>
    <ul class="mfb-component__list">
      <li>
        <a href="#" data-mfb-label="Child Button 1" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-social-github"></i>
        </a>
      </li>
      <li>
        <a href="#" data-mfb-label="Child Button 2" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-social-octocat"></i>
        </a>
      </li>
      <li>
        <a href="#"
           data-mfb-label="Child Button 3" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-social-twitter"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>