In the first article of this series we dissected a DDRMenu XSL . Now we are going to make a few sample XSL menus based on a number of live use cases that you may run into while building menus for your skins. In these use cases you will learn the techniques we will use in our third article where we will build a basic mega menu from the start and later extend it with other features.
In the first article of this series we dissected a DDRMenu XSL . Now we are going to make a few sample XSL menus based on a number of live use cases that you may run into while building menus for your skins. In these use cases you will learn the techniques we will use in our third article where we will build a basic mega menu from the start and later extend it with other features.
The way this blog entry is setup is as follows, first a description of the use case, then the actual XSL, and finally a description of how the XSL works.
Case1 : A simple unordered list menu that only shows the children of the selected element.
Explanation
The simple unordered list structure we previously used in the first article is very similar to this structure only this time we only call the node template to show the child elements when @breadcrumb =1. In this instance we use @breadcrumb and not @selected because we also want to have the child elements shown if a child element is also selected and not just the parent element.
Case2: A menu where each element has its own style. ( multiple solutions )
color
Explanation
The above structure represents a simple example. We just give each element a class that matches its position, color1, color2, etc. In the XSL the position() is used to get the position of the element. Now we just need to define those classes in our CSS.
orange
lime
pink
Explanation
The above example is a bit more complex. If we use the position() in this instance we have to change our CSS each time we move a tab around . In this solution we pass the tabname to another template and use it to determine the element class.
Case 3: A one level image only menu
![]()
Explanation
As you can see this is pretty straight forward. We use the large icon option from the page settings and then use @largeimage in our xsl.
Lessons Learned
XSL has built in functions that we can take advantage of. One of these functions is the ability to get the position of an element
We can use named templates and call them whenever we want. This allows us to not have to base our templates on our xml structure as we have seen in the first article
If we use it like this we don’t need to match an element any more
We can create our own elements and add attributes to them using <xsl:attribute>
![]()
If we use hardcoded text then we must always put them in <xsl:text> tags. This prevents weird characters appearing because of wrongly parsed extra spaces
color
Some of the page settings are available as attributes in the XML file. We can use the large icon whenever we want to.
This concludes the second article. In the next article we will use all of these techniques and more to create and extend our very own mega menu.
Note: In case you have problems viewing any of the code above, you can find a simple version of this article by clicking here.