This is the first in a series of articles on how to use the templating feature of the DDRMenu. This series will be based upon the XSLT template option. We will dissect a basic XSL template step by step so by the end of this article you understand how this works and can understand an XSL template or create your own. Even if you don’t know anything about XSL hopefully by the end of this article you will have a better understanding and working knowledge.
To use an XSL template first you need an XML structure to match it against. The structure of the XML of the DDRMenu can be found here http://www.dnngarden.com/XML-format.T122.aspx. As you expect all kind of info related to tabs is available as well as user data and other information that we can use to create various menu layouts.
Let's start with a basic XSLT template that outputs an unordered list. I will explain this step by step so at the end of this first article you will have a better understanding of the “how and what” of XSL and how it applies to the DDRMenu.
Below is an example XSLT file
first
last
> selected
Let's start by dissecting the most important pieces. An XSL can consist of one or more templates to process your input file to the desired output file. In a standard #DDRMenu XSL template these are:
Match the root of the document
Match the root element
Match the node element
For now this is enough information to get started, but in the following sections of this article series we will make our own templates with more specific purposes to gain even more control over the output. This last element is the most important one because it’s the one that creates the complete tab structure. Let's take a closer look at this last, most important, element.
For each node element (tab) we create an unordered list item with one or more CSS classes. If the tab is enabled we add a link if not we just add the tab name as text. Let’s walk through the code. The @ in front of the names means we are not looking at the XML element itself but at the attribute of the xml element.
first
last
> selected
The above code creates a class attribute and if the value of one of the attributes matches then a new CSS class is added. We put these in between elements because this prevents weird characters appearing in the output as a result of the parser.
#
return false
In the above code an if else construction is used to check to see if the tab is enabled, if it is then a link to the tab URL is added and if it’s not then a non-clickable link is created.
Now all we need to do is check if and see if there is a node element within the node element. If a node element exists we then start a new unordered list and start the process over again.
Lessons Learned
XSL needs one or more templates
We can call these templates like this
We can create html attributes like "class', href, etc using
We can get the value of the content of en element or attribute using
We can use simple if statements
If else statement
I Hope you learned something from this and have a better understanding on how to use XSL in combination with the DDRMenu. You should be able to understand how a template is build up and how it works . In my second article we will build a simple unordered list menu step and introduce you to some more XSL along the way. The third article most likely we will build a new megamenu step by step and learn about some more DDRMenu features along the way.