Floating Action Menu

To use the tabs functionality the fusionCSS.js library needs to be included.

Horizontal Menu (Right)

add 
<div class="fam">
	<a class="button floating accent">
		<i class="material-icons">add</i>
	</a>
	<ul>
		<li><a class="button floating accent mini"><i class="material-icons">mail</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">inbox</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">attach_file</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">add_a_photo</i></a></li>
	</ul>
</div>

Horizontal Menu (Left)

add 
<div class="fam left">
	<a class="button floating accent">
		<i class="material-icons">add</i>
	</a>
	<ul>
		<li><a class="button floating accent mini"><i class="material-icons">mail</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">inbox</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">attach_file</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">add_a_photo</i></a></li>
	</ul>
</div>

Vertical Menu (Down)

add 
<div class="fam vertical">
	<a class="button floating primary">
		<i class="material-icons">add</i>
	</a>
	<ul>
		<li><a class="button floating primary mini"><i class="material-icons">mail</i></a></li>
		<li><a class="button floating primary mini"><i class="material-icons">inbox</i></a></li>
		<li><a class="button floating primary mini"><i class="material-icons">attach_file</i></a></li>
		<li><a class="button floating primary mini"><i class="material-icons">add_a_photo</i></a></li>
	</ul>
</div>

Vertical Menu (Up)

add 
<div class="fam vertical">
			<a class="button floating primary">
			<i class="material-icons">add</i>
			</a>
			<ul>
			<li><a class="button floating primary mini"><i class="material-icons">mail</i></a></li>
			<li><a class="button floating primary mini"><i class="material-icons">inbox</i></a></li>
			<li><a class="button floating primary mini"><i class="material-icons">attach_file</i></a></li>
			<li><a class="button floating primary mini"><i class="material-icons">add_a_photo</i></a></li>
			</ul>
			</div>

Open On Load

The following example opens on load and the first two menu items are marked with the class "leave-open" so that when clicked they don't cause the menu to close.

add 
<div class="fam">
	<a class="button floating accent">
			<i class="material-icons">add</i>
	</a>
	<ul class="exposed">
		<li><a class="button floating accent mini leave-open"><i class="material-icons">mail</i></a></li>
		<li><a class="button floating accent mini leave-open"><i class="material-icons">inbox</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">attach_file</i></a></li>
		<li><a class="button floating accent mini"><i class="material-icons">add_a_photo</i></a></li>
	</ul>
</div>
Top