3. Individual Item Styling & Touch Friendliness
  1. 12m 20s
    Sep 01, 2017

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:

  • How to style individual menu buttons independently
  • Adding individual item classes
  • How to target each item with a CSS selector
  • How to include the FAB button javascript
  • Making the menu mobile friendly
  • Setting the menu to expand on click / touch
  • Including the Modernizr script for touch enabled device detection
  • Setting up the menu to work on both touch and hover (mobile and desktop)
skin advanced dnn8
Andy Stephenson

About 2017 Edition

2h 47m 47s All Jan 01, 2017

DNN Video Tutorials posted during 2017

dnn7 dnn8 advanced jquery skin
Andy Stephenson

30 days money back guaranteed