# Floating Action Menu

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

## Horizontal Menu (Right)

add

- mail
- inbox
- attach_file
- add_a_photo

    <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

- mail
- inbox
- attach_file
- add_a_photo

    <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

- mail
- inbox
- attach_file
- add_a_photo

    <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

- mail
- inbox
- attach_file
- add_a_photo

    <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

- mail
- inbox
- attach_file
- add_a_photo

    <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>