Mega Menus and More

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>

FAQs.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 -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <dl class="faq">
                <!-- This will tell the data view to look for the actual content
and come back when it's done. -->
                <xsl:apply-templates/>
        </dl>
        <script type="text/javascript">
            $(".faq>dt").on(
                "click",
                function() {
                    $(this).next().slideToggle();
                }
            ).click();
        </script>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <dt><xsl:value-of select="@Title"/></dt>
        <dd><xsl:value-of select="@Answer" disable-output-escaping="yes"/></dd>
    </xsl:template>
</xsl:stylesheet>

featured-content.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                            -->

    <!--
        This view depends on a list set up in a particular way:

        1. Create an Announcements list
        2. Add field called "ImageUrl" (case sensitive - you can rename it after you create it)
            Field should be Hyperlink or Picture, formatted as Picture

        The view as shown works in IE8 or higher, and all recent versions of FireFox, Safari
        and Chrome.

        Sample output here:

        http://spexp-blog-files.s3.amazonaws.com/NBB/featuredcontentsample.png
    -->

    <xsl:output indent="yes" method="html"/>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- 
            This is the actual wrapper element that will be emitted
            In this case, an HTML5 "section" element to hold featured content images with their captions
        --> 

        <section id="featuredContent">
            <ul id="sliderList"> <!-- List of featured content images -->
                <!-- Render rows for "images mode" -->
                <xsl:apply-templates mode="images"/>
            </ul>
            <xsl:comment>/#sliderList</xsl:comment>
            <ul id="sliderLinks"> <!-- List of links for images above -->
                <!-- Render rows for "links mode" -->
                <xsl:apply-templates mode="links"/>
            </ul>
            <xsl:comment>/#sliderLinks</xsl:comment>
        </section>
        <xsl:comment>/#featuredContent</xsl:comment>
        <style type="text/css">#sliderList li{display:block;width:400px;height:200px;margin:0;padding:0;position:absolute;left:-400px;top:0;opacity:0;z-index:1;transition:all linear 500ms;}#sliderList li:first-child{left:0;opacity:1;}#featuredContent{position:relative;overflow:hidden;}#featuredContent figure{margin:0;}#sliderList{width:400px;height:200px;margin:0;padding:0;}#featuredContent h1{text-indent:-9999px;float:left;}#featuredContent figcaption{position:absolute;width:380px;bottom:0;padding:5px 10px;background:rgba(255,255,255,0.8);}#sliderLinks a{text-decoration:none;}#sliderList li:target{left:0;z-index:9;opacity:1;}</style>
        <!-- end wrapper -->
    </xsl:template>
    <!-- template for "images mode" -->
    <xsl:template match="/dsQueryResponse/Rows/Row" mode="images">
        <!-- This markup is used for each item in the list -->
        <li id="item-{@ID}">
            <figure>
                <img alt="{@ImageUrl.desc}" src="{@ImageUrl}"/>
                <figcaption><xsl:value-of select="@Body" disable-output-escaping="yes"/></figcaption>
            </figure>
        </li>
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row" mode="links">
        <li><a href="#item-{@ID}"><xsl:value-of select="@Title"/></a></li>
    </xsl:template>
</xsl:stylesheet>

identitytransform.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" indent="yes"/>
    <xsl:template match="/">
        <xmp>
            <xsl:apply-templates />
        </xmp>
    </xsl:template>
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()" />
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

links-list-nav.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 -->
        <nav>
            <ul>
                <!-- This will tell the data view to look for the actual content
and come back when it's done. -->
                <xsl:apply-templates/>
            </ul>
        </nav>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <li>
            <a href="{@URL}">
                <xsl:value-of select="@URL.desc"/>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>