By Andy Stephenson
July 2014
In this tutorial we walk you through how to create your own custom DDR XSLT templates.
To demonstrate the customisation of an XSLT DDR Menu Template, we will be creating this fantastic horizontal responsive slide down menu designed by the guys at codrops.
http://tympanus.net/codrops/2013/05/17/horizontal-slide-out-menu/
We demonstrate how easy it is to convert this menu into a native DDR menu for DNN. To do this we walk you through how to make sure your XSLT DDR menu template is producing the correct HTML markup with the correct CSS classes. We also show you how to include all the necessary CSS and Javascript files in your menu.
The videos contain:
Video 1 - How to Setup a New Basic XSLT Menu
- Introduction
- Standalone or skin based?
- Where to create your DDR menu template folder
- How to set up a basic unordered list XSLT template
- How to add JS files to a DDR menu
- How to add CSS files to a DDR menu
Video 2 - Introduction to the Basic XSLT Template
- Introduction to various XSL templates
Video 3 - Customising an XSLT Template
- How to add surrounding markup to the menu
- How to add static CSS classes to elements
- Dynamically adding CSS classes to elements
- How to count nodes
- Firing the menu javascript
- How to add page icons inside an XSLT template
- Limiting a menu to a set number of ancestors