2. Slinky JS Container and Header Styling

In this tutorial we walk you through how to create a DNN theme using the wonderful Slinky JS jQuery plugin.

There are many useful jQuery plugins for creating interesting UI effects, and one of my absolute favorites is Slinky JS.

The Slinky JS produces a nice stacked headings effect, very effective in notifying the user of what content is available on the page without the need of a table of contents or a usability error-prone accordion system.

Upon page load, all the section headings are stacked at the bottom of the page, and as the user scrolls down the page, upon entering a new section of content, the heading will then scroll up to the top of the page where it will stack along with any other previous headings.

This video contains:

• How to create a DNN slinky container
• Duplicating a current container
• Clearing up the container
• Creating the slinky section HTML markup
• Setting slinky container as page default
• Initiating the Slinky JS plugin
• Styling the Slinky headings