Samples used in the 3rd session for Mega Menus and More!

0 - Welcome.md

Welcome to Mega Menus and More!

Code samples:

Basic Data View Template

Group tasks by priority using a single xsl:template

Group tasks by priority using multiple templates

Sample CSS (for demonstration purposes only - see your designer to create CSS for your production site) for the Ultra Mega Menu. You can see which classes we've included in our icon support CSS file here: CSS Glyphs for Ultra Mega Menu demo

Ultra Mega Menu XSL used with the links list linked below

Sample Ultra Mega Menu links list template which can be installed to your site's List Template Gallery

1 - basic-dvwp.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
<!-- http://sharepointexperience.com -->

    <xsl:output method="html" indent="yes"/>

    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">

        <!-- This is the actual wrapper element that will be emitted -->
        <div>

            <!-- This will tell the data view to look for the actual content
and come back when it's done. -->
            <xsl:apply-templates/>

        </div>
        <!-- end wrapper -->

    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows/Row">

        <!-- This markup is used for each item in the list -->
        <p><xsl:value-of select="@Title"/></p>

    </xsl:template>

</xsl:stylesheet>

2 - grouped-tasks.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
<!-- http://sharepointexperience.com -->

    <xsl:output method="html" indent="yes"/>
    <xsl:key name="groupByPriority" match="Row" use="@Priority"/>

    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">

        <!-- This is the actual wrapper element that will be emitted -->
        <ul>

            <!-- This will tell the data view to look for the actual content
and come back when it's done. -->
            <xsl:apply-templates/>

        </ul>
        <!-- end wrapper -->

    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows">

        <xsl:for-each select="Row[count(. | key('groupByPriority', @Priority)[1]) = 1]">
          <xsl:sort select="@Priority"/>
        	<li>
        		<xsl:value-of select="@Priority"/>
        		<ul>
        			<xsl:for-each select="key('groupByPriority', @Priority)">
        				<xsl:sort select="@Title"/>
        				<li><xsl:value-of select="@Title"/></li>
        			</xsl:for-each>
        		</ul>
        	</li>
        </xsl:for-each>

    </xsl:template>
    
</xsl:stylesheet>

3 - grouped-tasks-templates.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
	<!-- http://sharepointexperience.com -->

	<xsl:output method="html" indent="yes"/>
	<xsl:key name="groupByPriority" match="Row" use="@Priority"/>

	<!-- This template is the "wrapper" or "container" for the custom view. -->
	<xsl:template match="/">

		<!-- This is the actual wrapper element that will be emitted -->
		<ul>

            <!-- This will tell the data view to look for the actual content
            and come back when it's done. -->
            <xsl:apply-templates/>

        </ul>
        <!-- end wrapper -->

    </xsl:template>

    <xsl:template match="Rows">
    	<xsl:apply-templates mode="header" select="Row[count(. | key('groupByPriority', @Priority)[1]) = 1]"/>
    </xsl:template>

    <xsl:template match="Row" mode="header">
	   	<li>
    		<h1><xsl:value-of select="@Priority"/></h1>
    		<ul>
    			<xsl:apply-templates mode="detail" select="key('groupByPriority', @Priority)"/>
    		</ul>
    	</li>
    </xsl:template>

    <xsl:template match="Row" mode="detail">
    	<li>Title: <xsl:value-of select="@Title"/></li>
    </xsl:template>

</xsl:stylesheet>

4-ultra-mega-menu.css

#ultramegamenu {
  position: absolute;
  width: 100%;
}
#ultramegamenu ul {
  margin: 0;
  padding: 5px 10px;
  background: #000000;
 }

#ultramegamenu > ul {
  list-style: none;
  height: 30px;
  z-index: 1;
}

#ultramegamenu a,
#ultramegamenu li {
  color: white;
  text-decoration: none;
}

#ultramegamenu li {
  float: left;
  display: block;
  position: relative;
  padding: 0 9px;
  margin: 5px 20px 0 0;
  width: 200px;
}
#ultramegamenu a {
  display: block;
}

#ultramegamenu li.dropdown:hover {
  background: #550000
}

#ultramegamenu li.dropdown ul {
  position: absolute;
  background: #000000;
  left: -26px;
  width: 218px;
  display: none;
}

#ultramegamenu li.dropdown:hover > ul {
  display: block;
}

#ultramegamenu li.dropdown li ul {
  left: 33%;
  z-index: 2;
  top: 0;
}

5-ultra-mega-menu.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- This XSL Stylesheet created by SharePoint Experts, Inc. -->
    <!-- http://sharepointexperience.com -->

    <xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/>
    <xsl:strip-space elements="ul"/>

    <xsl:template match="/">

        <!-- dynamically insert a reference to our icon-font CSS -->
        <script type="text/javascript">
            var cssFile=document.createElement("link");
            cssFile.setAttribute("rel", "stylesheet");
            cssFile.setAttribute("type", "text/css");
            cssFile.setAttribute("href", "//s3.amazonaws.com/spexp.me/css/ultramegamenu/style.css");
            document.getElementsByTagName("link")[0].appendChild(cssFile);
        </script>
        <nav id="ultramegamenu">
            <ul>
                <!-- Now apply the Row-level template, but only to Rows with "no parent item" -->
                <xsl:apply-templates
                    select="/dsQueryResponse/Rows/Row[normalize-space(@Parent_x0020_Item) = '']"/>
            </ul>
        </nav>
    </xsl:template>

    <!-- The Row-level template -->
    <xsl:template match="/dsQueryResponse/Rows/Row">
        
        <!-- keep track of the current ID - we'll need it soon -->
        <xsl:variable name="currentID" select="@ID"/>
        
        <!-- create a variable that will be used to place a CSS class on menu items with children -->
        <xsl:variable name="hasChildren">
            
            <!-- told you we'd need it soon! Find all rows that reference the current Row as the "Parent Item" -->
            <xsl:if test="/dsQueryResponse/Rows/Row[@Parent_x0020_Item_x003a_ID = $currentID]"
                >dropdown</xsl:if>
        </xsl:variable>
        
        <!-- If menu has "additional class" defined, include it in the variable "additionalClass" -->
        <xsl:variable name="additionalClass">
            <xsl:if test="@Additional_x0020_Class[string()]">
                <xsl:value-of select="@Additional_x0020_Class"/>
            </xsl:if>
        </xsl:variable>
        
        <!-- create the list item for this menu item -->
        <li class="{$additionalClass} {$hasChildren}">
            <!-- link defaults to "#"... -->
            <a href="#">
                <!-- but if the URL is provided... -->
                <xsl:if test="@URL[string()]">
                    <!-- override the "href" attribute ... -->
                    <xsl:attribute name="href">
                        <!-- with the menu item's URL field -->
                        <xsl:value-of select="@URL"/>
                    </xsl:attribute>
                </xsl:if>
                <!-- If the URL has a description... -->
                <xsl:if test="@URL.desc[string()]">
                    <!-- add a "title" attribute... -->
                    <xsl:attribute name="title">
                        <!-- filled with the item's URL description -->
                        <xsl:value-of select="@URL.desc"/>
                    </xsl:attribute>
                </xsl:if>
                <!-- The title field for the linked text -->
                <xsl:value-of select="@Title"/>
            </a>
            
            <!-- Is there additional content to display? -->
            <xsl:if test="@Additional_x0020_Display[string()]">
                <!-- Display it, and don't escape SharePoint's rich text field -->
                <xsl:value-of select="@Additional_x0020_Display" disable-output-escaping="yes"/>
            </xsl:if>
            
            <!-- Any items referring to the current item in their "parent item" field? -->
            <xsl:if test="/dsQueryResponse/Rows/Row[@Parent_x0020_Item_x003a_ID = $currentID]">
                <!-- Create a child unordered list -->
                <ul>
                    <!-- re-run this template with those child items -->
                    <xsl:apply-templates
                        select="/dsQueryResponse/Rows/Row[@Parent_x0020_Item_x003a_ID = $currentID]"
                    />
                    <!-- okay, done with those children, back to work -->
                </ul>
            </xsl:if>
        </li>
    </xsl:template>
</xsl:stylesheet>