2. Slinky JS Container and Header Styling
  1. 9m 31s
    Jan 01, 2017

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
Tags:
skin dnn8
Author:
Andy Stephenson

About 2017 Edition

2h 47m 47s All Jan 01, 2017

DNN Video Tutorials posted during 2017

Tags:
dnn7 dnn8 advanced jquery skin
Author:
Andy Stephenson
Back

Try FREE
30 days money back guaranteed