3. Menu System, Scrollspy and Smooth Scrolling

In this tutorial we demonstrate how to build a single page application style theme for DNN.

Single Page Applications or SPA's have become very popular in modern web development, mostly due to the fact that the page doesn’t need to reload to access different information on the site. This drastically improves the user experience, the user can get to the information they want to see without waiting for a new page to finish loading.

In single page applications, the navigation is very important and it needs to work in a very different way to a standard website or DNN theme… When you click on a menu item, we need to automatically scroll the user’s viewport to the correct section of the page.

This video contains:

• Setting text color
• How to vertically center content
• Setting up hash linking in a DNN menu
• How to implement Bootstrap’s Scrollspy plugin in DNN
• How to implement smooth single page scrolling