<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material design风格浮动按钮特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:100,200,300,400' rel='stylesheet' type='text/css'>
<script src="dist/lib/modernizr.touch.js"></script>
<link href="css/index.css" rel="stylesheet">
<link href="dist/mfb.css" rel="stylesheet">
</head>
<body>
<!-- <div class="htmleaf-container">
<header class="htmleaf-header">
<h1>Material design风格浮动按钮特效 <span>Vanilla Js Material design floating menu with action buttons</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
</div> -->
<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="View on Github" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-github"></i>
</a>
</li>
<li>
<a href="#" data-mfb-label="Follow me on Github" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-octocat"></i>
</a>
</li>
<li>
<a href="#" data-mfb-label="Share on Twitter" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-social-twitter"></i>
</a>
</li>
</ul>
</li>
</ul>
<section id="panel" class="panel">
<header>
<h1>
Material Floating Buttons
</h1>
<span id="showcode" class="showcode">
<i class="ion-eye icon-yepcode"></i>
<i class="ion-eye-disabled icon-nocode"></i>
</span>
</header>
<article>
<p>
Customizable, semantic Material button implementation. <br>
<span class="striked">Shamelessly</span> Openly inspired by Google Inbox, Evernote and Path.
</p>
<p>
To add Material Floating Buttons to any project just download or clone the repo from Github.<br>
Try it yourself by selecting a style here below, or click on the yellow button here above for a code preview and refer to the docs more info.
</p>
<p>
<select id="selections-fx">
<option value=" mfb-zoomin " selected>Zoom in</option>
<option value=" mfb-slidein ">Slide in</option>
<option value=" mfb-slidein-spring ">Slide in (spring)</option>
<option value=" mfb-fountain ">Fountain</option>
</select>
<select id="selections-pos">
<option value="mfb-component--tl ">top left</option>
<option value="mfb-component--tr ">top right</option>
<option value="mfb-component--bl ">bottom left</option>
<option value="mfb-component--br " selected>bottom right</option>
</select>
</p>
<div class="code">
<p>
To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github. <br>
</p>
<pre>git clone https://github.com/nobitagit/polymer-slidenav.git</pre>
<p>
After referencing the styles in your header drop the MFB markup in your HTML like so:
</p>
<pre><ul class="mfb-component--br mfb-slidein" data-mfb-toggle="hover">
<li class="mfb-component__wrap">
<a href="#" data-mfb-label="A label" class="mfb-component__button--main">
<ul class="mfb-component__list">
<li>
<a href="#" data-mfb-label="Add" data-mfb-label="label with long long title" class="mfb-component__button--child">
<i class="mfb-component__child-icon ion-paper-airplane"></i>
</a>
</li>
</ul>
</li>
</ul></pre>
<p>
The two classes of the main <code><ul></code> tag define the position of the component and its associated animation. The rest of the code always stays the same regardless of position and animation chosen. Refer to the docs or to the showcase for a thorough explanation.
</p>
<p>
The best way to integrate MFB in existing projects is to build the styles directly from the source. The scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.
</p>
<p>
If you use <a href="http://gruntjs.com/">Grunt</a> and have cloned the repo just run <code>grunt build</code> or <code>grunt watch</code> to have automatic compilation.
</p>
</div>
</article>
<footer>
<a href="https://github.com/nobitagit/material-floating-button"
>
<button class="actions">
<i class="ion-social-github"></i> View on Github
</button>
</a>
<a href="http://twitter.com/share?text=Check this material floating button component!&url=http://nobitagit.github.io/material-floating-button/&hashtags=material,design,button,css">
<button class="actions">
<i class="ion-social-twitter"></i> Share on Twitter
</button>
</a>
</footer>
</section>
<script src="dist/mfb.js"></script>
<script type="text/javascript">
var panel = document.getElementById('panel'),
menu = document.getElementById('menu'),
showcode = document.getElementById('showcode'),
selectFx = document.getElementById('selections-fx'),
selectPos = document.getElementById('selections-pos'),
// demo defaults
effect = 'mfb-zoomin',
pos = 'mfb-component--br';
showcode.addEventListener('click', _toggleCode);
selectFx.addEventListener('change', switchEffect);
selectPos.addEventListener('change', switchPos);
function _toggleCode() {
panel.classList.toggle('viewCode');
}
function switchEffect(e){
effect = this.options[this.selectedIndex].value;
renderMenu();
}
function switchPos(e){
pos = this.options[this.selectedIndex].value;
renderMenu();
}
function renderMenu() {
menu.style.display = 'none';
// ?:-)
setTimeout(function() {
menu.style.display = 'block';
menu.className = pos + effect;
},1);
}
</script>
</body>
</html>
纯Js Material design风格浮动按钮特效.zip （23个子文件） 
132687021568602375 material-floating-button css 
htmleaf-demo.css 5KB normalize.css 2KB index.css 4KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 7KB dist mfb.js 2KB mfb.css 34KB mfb.css.map 8KB mfb.min.js 615B mfb.min.css 26KB lib modernizr.touch.js 2KB src mfb.js 2KB mfb.css.map 8KB closure bottom.js 24B top.js 45B mfb.scss 12KB _ _fountain.scss 2KB _zoomin.scss 2KB _slidein-spring.scss 2KB _slidein.scss 1KB资源评论
