1. Introduction and Implementation of the FAB Menu

In this tutorial we demonstrate how to develop and integrate an 'FAB Menu', or a Floating Action Button Menu in a DNN theme. This menu style is championed by google for their material design guidelines and is used across most of Google's products.

The beauty of this style of menu is that it is incredibly UX friendly, especially on mobile screens. It is ideal for implementing an expandable 'contact us' menu or a social link menu.

In this tutorial we'll be walking you through how to implement this excellent example of a FAB menu by Aurielo on GitHub. It is a very well coded FAB menu based mainly on pure CSS.

This video contains:

• Introduction
• Locating your theme folder and files
• How to implement CSS code from GitHub
• Removing the CSS source map
• How to include the Ionicons icon font
• Creating the basic HTML menu structure
• Button placement
• Menu effects
• How to set the menu to open on hover