SharePoint Mega Menu from a DVWP and a List

The Vision:

A MegaMenu for a SharePoint portal home page

The Mission:

Make it easy to maintain. Allow rich content and sub headers as well as standard links. Factor in frequent changes without involving developers or a lengthy Dev/Test/Prod release cycle. The personal assistant of the marketing boss should be able to make changes on the fly. Instantaneous. Without any knowledge of HTML or CSS, so editing code is out. If it’s more complicated than filling in a time sheet, it won’t fly. And do all that with just the browser interface and SharePoint Designer. No Visual Studio, no custom code.

What’s a MegaMenu, anyway?

There are quite a few sites out there describing how to create impressive MegaMenus if you Bingle a bit. Rave reviews of the concept from Jacob Nielsen. Flashy sites from developers strutting their stuff. JavaScript, jQuery – the choice is yours. Most of them even work.

None of those take into account a SharePoint background, though. The MegaMenu content is always somehow “there already”, nicely configured in a nested construct of UL and LI tags, with hard-coded <A href> tags and titles. Not something the Marketing Assistant will want to get his head around if he wants to add a few items and a flashy “Hot and new” icon to a new menu entry.

So, to achieve the vision and make the mission possible, we need to come up with some practicable steps.

Here’s the plan:

  • Create a SharePoint list that stores all the items to feature in the MegaMenu
  • Create a view on that list with a Data View Web Part (DVWP)
  • Modify the DVWP to show as nested lists instead of the standard table structure
  • Apply the CSS and the jQuery

What you need:

  • A SharePoint 2010 site.
  • SharePoint Designer 2010
  • jQuery Hover Intent plug-in: The only non-standard SharePoint elements required are the jQuery core and the library for Hover Intent. This is a variation of a JavaScript functionality that displays stuff if the mouse hovers over specific screen elements. Download the Hover Intent here: http://cherne.net/brian/resources/jquery.hoverIntent.html
  • Why use Hover Intent? JavaScript mouse hover events normally fire immediately when the mouse hovers over the item. This can lead to a lot of screen flicker and a general perception of “nervous” behavior. Hover Intent waits for the mouse to pause before the event is triggered, Check out the link above for a demo of what it does. Don’t forget to download the jQuery core file.
  • The CSS and jQuery script calls were originally posted at http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/but this web site seems no longer available. Thanks to the WayBack machine, though, it can still be viewed in the Internet Archive and I have salvaged the MegaMenu Demo and placed a copy on my site. All credits for developing that demo go to Soh Tanaka.
I also assume that you have a basic knowledge of the SharePoint 2010 browser interface , basic knowledge of SharePoint Designer 2010, Data View Web Parts (DVWP) and how to style screen elements with CSS.

The final look and feel we’re after can be experienced in the MegaMenu Demo. In my Sharepoint site, it looks like this:

Have a look around and try out the demo to see what the end product should look like. Once you’re comfortable with the concept, come back and let’s take action.

1. Create a SharePoint list for menu items

If we want the MegaMenu to be configurable, then a SharePoint List will be the most logical way to achieve that. For the sake of normalizing data, I suggest an approach with two lists.

List for MegaMenu headers

This list is called MegaMenu Headers and has three columns:

Title: — Single line of text – The MegaMenu tab title (if you use graphic files for the MegaMenu tab background, these won’t ever be visible, but they will help with the general orientation).

Order – number – the order in which the headers appear on the final page. This column will be the first sorting and grouping criterion of the mega menu. The column will be inherited by the list that stores the MegaMenu details.

CSSClass – Single line of text – This value needs to be manually created in the CSS file that formats the MegaMenu. Every header tab will have a specific width and position, defined by a CSS class. To make the formatting easier to maintain, assign the CSS class name here and then make sure that the CSS file actually has an entry that defines the properties for that class.

List for MegaMenu Content

The Headers provide the outer envelope, but the meat of the functionality will be with the individual content items of the menus. For this, we need another SharePoint List. The list is called MegaMenu Content and has these columns:

Column Type
MegaHeader Lookup
MenuRow Number
MenuColumn Number
ItemNumber Number
Title Single line of text    (Don’t make this required!! It will not always have data)
MenuLink Hyperlink or Picture
ItemImage Hyperlink or Picture
ItemBody Multiple lines of text  (This is rich text)
Published Yes/No
ItemWidth Choice  (the choices are: “default, 2, 3, 4″. Make the default value “default”. The code below will look out for that.)
MegaHeader:Order Lookup
MegaHeader:CssClass Lookup

The last two columns, MegaHeader:Order and MegaHeader:CssClass are created by ticking their column names when defining the Lookup column for MegaHeader.

Now fill your list with some content. For each item, make sure you select a MegaHeader value and specify MenuRow, MenuColumn and ItemNumber. These numbers will influence the order of the items in a menu panel.

Then specify at least one of the columns Title, MenuLink, ItemImage or ItemBody If a menu item has a Title specified, it will be formatted as a h2 element. A MenuLink for an item with a title is optional.

ItemWidth is optional. Leave it at default unless you want an item to span more than one column. In that case, the first item in that column requires the ItemWidth to be set.

2. Creating a DVWP

Fire up SharePoint Designer 2010, open an existing Web Part Page or a Wiki Page and create a DVWP:

Insert > Data View > Empty Data View

In the new, empty data view, click the link to select a data source and select the list MegaMenu Content. It does not really matter which fields you select for the display, because we will gut the DVWP content and replace it with a custom XSL Template. So select a few fields and click “Insert Selected Fields as > Multiple Item View”.

By default, the DVWP only shows 10 items. Fix that by clicking “Paging > Display All Items”.

Next, click the Sort & Group icon and add these fields to the sort order:

- MegaHeader:Order

- MenuRow

- MenuColumn

- ItemNumber

3. Customising the DVWP

By default, a DVWP is displayed as a table. We need to change this to a nested list with this structure:

<ul id="topnav">
	<li>Header Tab
<div class="”sub”">
<div class="”row”">
<ul>
	<li>Menu Item</li>
	<li>Menu Item</li>
	<li>Menu Item</li>
</ul>
</div>
</div></li>
	<li>Next Header tab ... etc</li>
</ul>

This image shows the nested classes and divs:

red = <div class=”sub”>
orange = <div class=”row”>
purple = <ul> or <ul class=”span2″>, depending on the data

So, let’s apply the custom template. Find the first template in the XSL and delete all template code down to the last </xsl:template> tag. Make sure to keep the opening <Xsl><xsl:stylesheet> tags intact.

Without further ado, here is the template code that I used, starting with the <Xsl> tag:

<Xsl>
<xsl:stylesheet
    version="1.0"
    xmlns:x="http://www.w3.org/2001/XMLSchema"
    xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
    xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
    xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
    xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:SharePoint="Microsoft.SharePoint.WebControls"
    xmlns:ddwrt2="urn:frontpage:internal"
    exclude-result-prefixes="x d asp xsl msxsl ddwrt ddwrt2">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_apos">&apos;</xsl:param>
<xsl:param name="ManualRefresh">
</xsl:param><xsl:variable name="dvt_1_automode">0</xsl:variable>

<xsl:key name="MHeaders" match="Row" use="@MegaHeader_x003a_Order"/>
<xsl:key name="MRows" match="Row" use="concat(@MegaHeader_x003a_Order, '-', @MenuRow)"/>
<xsl:key name="MColumns" match="Row" use="concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn)"/>

  <xsl:template match="/" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
    <xsl:call-template name="Setup"/>
  </xsl:template>

  <xsl:template name="Setup">
    <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
    <!-- start unordered list for the navigation top tabs -->
    <ul id="topnav">
      <xsl:variable name="HeaderLoop" select="//Row[generate-id() = generate-id(key('MHeaders', @MegaHeader_x003a_Order)[1])]"/>
      <xsl:for-each select="$HeaderLoop">
        <xsl:variable name="LinkStart" select="string('&lt;a href=&quot;#&quot; class=&quot;')"/>
        <xsl:variable name="LinkClass"><xsl:value-of select="@MegaHeader_x003a_CssClass"/></xsl:variable>
        <xsl:variable name="LinkEnd" select="string('&quot; &gt;')"/>
        <xsl:variable name="LinkVar" select="concat($LinkStart,$LinkClass,$LinkEnd)"/>
        <xsl:variable name="CloseATag" select="string('&lt;/a&gt;')"/>
        <!-- build the list items for the top tabs -->
        <li>
          <xsl:value-of select="$LinkVar" disable-output-escaping="yes"/>
          <xsl:value-of select="substring-after(@MegaHeader., ';#')"/>
          <xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
          <!-- create a container for each menu panel -->
          <div class="sub">
            <xsl:variable name="RowLoop" select="key('MHeaders', @MegaHeader_x003a_Order)[generate-id() = generate-id(key('MRows', concat(@MegaHeader_x003a_Order, '-', @MenuRow))[1])]"/>
            <xsl:for-each select="$RowLoop">
              <!-- create a container for each row -->
              <div class="row">
                <xsl:variable name="ColumnLoop" select="key('MRows', concat(@MegaHeader_x003a_Order, '-', @MenuRow))[generate-id() = generate-id(key('MColumns', concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn))[1])]"/>
                <xsl:for-each select="$ColumnLoop">
                  <!-- start a new unordered list for each column -->
                  <!-- if column width is specified, use that as a class -->
                  <xsl:variable name="SpanTagStart" select="string('&lt;ul ')"/>
                  <xsl:variable name="SpanTagClass">
                    <xsl:choose>
                      <xsl:when test="@ItemWidth != string('default')">
                        <xsl:value-of select="concat(string('class=&quot;span'),@ItemWidth,string('&quot; '))"/>
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:value-of select="''"/>
                      </xsl:otherwise>
                    </xsl:choose>
                  </xsl:variable>
                  <xsl:variable name="SpanTagEnd" select="string('&gt;')"/>
                  <xsl:variable name="SpanTagOpen" select="concat($SpanTagStart,$SpanTagClass,$SpanTagEnd)"/>
                  <xsl:variable name="SpanTagClose" select="string('&lt;/ul&gt;')"/>
                  <xsl:value-of select="$SpanTagOpen" disable-output-escaping="yes"/>
                  <!-- start a new unordered list for each column -->
                  <xsl:variable name="ItemLoop" select="key('MColumns', concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn))"/>
                  <xsl:for-each select="$ItemLoop">
                    <!-- build the a href tag if we have a link -->
                    <xsl:variable name="ItemLinkStart" select="string('&lt;a href=&quot;')"/>
                    <xsl:variable name="ItemLinkURL"><xsl:value-of select="@MenuLink"/></xsl:variable>
                    <xsl:variable name="ItemLinkVar">
                      <xsl:choose>
                        <xsl:when test="string-length(@MenuLink) &gt; 0">
                          <xsl:value-of select="concat($ItemLinkStart,$ItemLinkURL,$LinkEnd)"/>
                        </xsl:when>
                        <xsl:otherwise><xsl:value-of select="''"/></xsl:otherwise>
                      </xsl:choose>
                    </xsl:variable>
                    <!-- build the list items -->
                    <li>
                      <!-- if we have a Title, format as h2 -->
                      <xsl:choose>
                        <xsl:when test="string-length(@MenuLink) &gt; 0 and string-length(@Title) &gt; 0">
                        <!-- title and link -->
                          <h2>
                            <xsl:value-of select="$ItemLinkVar" disable-output-escaping="yes"/>
                            <xsl:value-of select="@Title"/>
                            <xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
                          </h2>
                        </xsl:when>
                        <xsl:when test="string-length(@MenuLink) = 0">
                        <!-- title only -->
                          <h2>
                            <xsl:value-of select="@Title"/>
                          </h2>
                        </xsl:when>
                        <xsl:otherwise>
                          <xsl:value-of select="$ItemLinkVar" disable-output-escaping="yes"/>
                          <xsl:value-of select="@MenuLink.desc"/>
                          <xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>
                        </xsl:otherwise>
                      </xsl:choose>
                      <xsl:if test="string-length(@ItemImage) &gt; 0">
                        <img border="0" src="{@ItemImage}" alt="{@ItemImage.desc}"/>
                      </xsl:if>
                      <xsl:if test="string-length(@ItemBody) &gt; 0">
                        <xsl:value-of select="@ItemBody" disable-output-escaping="yes"/>
                      </xsl:if>
                    </li>
                  </xsl:for-each>
                  <xsl:value-of select="$SpanTagClose" disable-output-escaping="yes"/>
                </xsl:for-each>
              </div>
            </xsl:for-each>
          </div>
        </li>
      </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>
</Xsl>

Note: If you want to use this XSL, I strongly suggest that you download MegaMenuXSLT text file with the code. When rendered in a web browser, some characters in the code may be replaced, resulting in faulty XSL.

Some Explanations

The biggest challenge was to figure out how to do the grouping in XSL. After several approaches, I found that the Muenchian grouping works best for my purposes. For each of the three grouping levels, I created filter keys that get progressively more complex, concatenating the header order, row order and column order.

<xsl:key name="MHeaders" match="Row" use="@MegaHeader_x003a_Order"/>
<xsl:key name="MRows" match="Row" use="concat(@MegaHeader_x003a_Order, '-', @MenuRow)"/>
<xsl:key name="MColumns" match="Row" use="concat(@MegaHeader_x003a_Order,'-', @MenuRow,'-', @MenuColumn)"/>

These keys are created above the first template. Since each header tab needs its own class assigned, I created variables that store the field CssClass for the current item and then concatenate that with the appropriate opening and closing brackets for the tag.

<xsl:variable name="LinkStart" select="string('&lt;a href=&quot;#&quot; class=&quot;')"/>
<xsl:variable name="LinkClass"><xsl:value-of select="@MegaHeader_x003a_CssClass"/></xsl:variable>
<xsl:variable name="LinkEnd" select="string('&quot; &gt;')"/>
<xsl:variable name="LinkVar" select="concat($LinkStart,$LinkClass,$LinkEnd)"/>
<xsl:variable name="CloseATag" select="string('&lt;/a&gt;')"/>
<!-- build the list items for the top tabs -->
<li>
    <xsl:value-of select="$LinkVar" disable-output-escaping="yes"/>
    <xsl:value-of select="substring-after(@MegaHeader., ';#')"/>
    <xsl:value-of select="$CloseATag" disable-output-escaping="yes"/>

The resulting html looks like this:

<a class="”MyClass”" href="”#”">TheFirstTab</a>

The same technique is used later on to create the ul tag for the column, so the default column width can be overridden. With a default column width, we need a simple <ul> tag, but when a column width is specified with a 2, for example, then we need <ul class=”span2”>.

<xsl:variable name="SpanTagStart" select="string('&lt;ul ')"/>
<xsl:variable name="SpanTagClass">
   <xsl:choose>
      <xsl:when test="@ItemWidth != string('default')">
         <xsl:value-of select="concat(string('class=&quot;span'),@ItemWidth,string('&quot; '))"/>
      </xsl:when>
      <xsl:otherwise>
         <xsl:value-of select="''"/>
      </xsl:otherwise>
   </xsl:choose>
</xsl:variable>
<xsl:variable name="SpanTagEnd" select="string('&gt;')"/>
<xsl:variable name="SpanTagOpen" select="concat($SpanTagStart,$SpanTagClass,$SpanTagEnd)"/>
<xsl:variable name="SpanTagClose" select="string('&lt;/ul&gt;')"/>
<xsl:value-of select="$SpanTagOpen" disable-output-escaping="yes"/>

Several rows below that, the ul tag is closed with

<xsl:value-of select="$SpanTagClose" disable-output-escaping="yes"/>

4. Create the CSS

The CSS file that was on the demo site is here: MegaMenu.css. Either plug it into your custom CSS file, if you use one, or load it via script. I’ve added the following CSS classes to allow for the multi-column spanning of items:

ul#topnav li .sub ul{
list-style: none; /*--This is in the original CSS--*/
margin: 0; padding: 0;
width: 180px;
float: left;
}

ul#topnav li .sub ul.span2{
width: 360px; /*--This is a new definition--*/
}

ul#topnav li .sub ul.span3{
width: 540px; /*--This is a new definition--*/
}

ul#topnav li .sub ul.span4{
width: 720px; /*--This is a new definition--*/
}

Also, make sure that in the section for the #topnav you have definitions for each of the CssClass items you specified in the MegaMenu Headers list.

For testing purposes I used a Web Part Page to contain the DVWP. I created a Content Editor Web Part below the DVWP and linked it to a MegaMenuScript.txt file that has the following script:

<script type="text/javascript" src="/managedPath/siteName/Resource Library/jquery.min.js"></script>
<script type="text/javascript" src="/managedPath/siteName/Resource Library/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	//On Hover Over
function megaHoverOver(){
	$(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
    (function($) {
        //Function to calculate total width of all ul's
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 0;
            //Calculate row
            $(this).find("ul").each(function() { //for each ul...
                rowWidth += $(this).width(); //Add each ul's width together
            });
        };
    })(jQuery);

    if ( $(this).find(".row").length > 0 ) { //If row exists...

        var biggestRow = 0;

        $(this).find(".row").each(function() {	//for each row...
            $(this).calcSubWidth(); //Call function to calculate width of all ul's
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });

        $(this).find(".sub").css({'width' :biggestRow}); //Set width
        $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin

    } else { //If row does not exist...

        $(this).calcSubWidth();  //Call function to calculate width of all ul's
        $(this).find(".sub").css({'width' : rowWidth}); //Set Width

    }
}
//On Hover Out
function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
}

//Set custom configurations
var config = {
     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
     interval: 100, // number = milliseconds for onMouseOver polling interval
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
     timeout: 500, // number = milliseconds delay before onMouseOut
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations

});
</script>

I keep all my scripts in a Resource Library. The exact path to your script will be different, so please make sure to adjust the path. If you don’t use a Custom CSS file, you can load the CSS in that script as well.

Now it’s time to test. If all goes well in the web part page, you can use the DVWP in your Master Page or a Page Layout. In this case, plug the script straight into the page instead of calling it via a CEWP.

For the Master Page version of the DVWP I created a filter, so the DVWP will only display items where the column “Published” is checked.

Now the marketing assistant can create new menu items in the MegaMenu Content list. He can check if all items behave by opening the Web Part page that has the single, unfiltered DVWP. If he’s happy with that, he can tick the “Publish” check box for the new menu items and they will appear in the filtered DVWP on the Master Page.

Mission Accomplished.

Share this:

54 responses to “SharePoint Mega Menu from a DVWP and a List”

  1. GMarez

    Hello,

    I am trying to implement this menu, but the most that get’s rendered from the xslt in the web part is

    No list or anchor tags are making it into the page. Can you tell me what I am doing wrong?

    Thanks!

  2. GMarez

    Thanks,

    It looks like some code I posted got stripped out. I have tried several times, but every time I place the XSL in the code, it stops displaying the data. There are no errors in Sharepoint, just blank. It gets as far as a UL tag with id “topnav” but the tag is empty.
    I copied and pasted the names directly from your post just to make sure. I recreated the DVWP after that, which again outputs fine until I change the XSL.

    Question: should there be code like this in the XSLT:

    &lt;a href=&quot;#&quot; class=&quot;

    ?

    Thank you!

  3. Simon Holmes

    Hey Teylyn,

    Great solution, I’ve managed to get it working nicely with altered CSS in a page. However, when I transfer this to my master page I am getting the following error:

    Object doesn’t support this property or method

    Which refers to this line:

    $(“ul#topnav li”).hoverIntent(config); //Trigger Hover intent with custom configurations

    I’ve tried a few different solutions but I can’t get the hover intent to work. Any ideas or is there something I’m missing?

    Thanks

  4. Eckhard Hauenherm

    Works fine, good post.
    I got the additional requirement to set the headers as links to subsites. for this I made two changes to the XSLand to the lists.
    First I defined a fourth column in the header list “Link” as one line of text.
    This field is looked up in the content list, too.
    I added this field datafields section of the DVWP: @MegaHeader_x003a_Link,MegaHeader:Link;
    Than I changed the code for the header loop to embed the link:

     <xsl:for-each select="$HeaderLoop">
    	<xsl:variable name="LinkStart" select="string('&lt;a href=&quot;')"/>
        <xsl:variable name="Link"><xsl:value-of select="@MegaHeader_x003a_Link"/></xsl:variable>
        <xsl:variable name="LinkStartEnd" select="string('&quot; class=&quot;')"/>
        <xsl:variable name="LinkClass"><xsl:value-of select="@MegaHeader_x003a_CssClass"/></xsl:variable>
        <xsl:variable name="LinkEnd" select="string('&quot; &gt;')"/>
        <xsl:variable name="LinkVar" select="concat($LinkStart,$Link,$LinkStartEnd,$LinkClass,$LinkEnd)"/>
        <xsl:variable name="CloseATag" select="string('&lt;/a&gt;')"/>

    works fine.
    Maybe it helps somebody
    Thanks and best greetings

  5. Brian

    This is a great article! The only thing i see missing is security trimming. Do you have any input on this? I may try to put something together over the weekend.

    B

  6. Reuben

    Great menu! Trying to get it to work across multiple sites in the same site collection on a Publishing Site. The code seems to have to be overhauled in order for it to work with a web service. Has anyone done this yet?

  7. Victor

    Is it possible to implement in MOSS 2007?
    Please let me know.
    Thanks

  8. Mahmoud Algoul

    Hi,
    I have done all your steps, I added all scripts in the master page, and the css.
    but still not working.

    please help.

  9. Mark

    Hi, thanks for this great solution. I’m really keen to get this working in a masterpage. Initially I’ve gone down the route of getting it working in a wiki page but am running in to difficulty and would appreciate some help!

    So far I’ve:
    - Created the lists and kept the case the same as in your article
    - Created 2 headers and a couple of items under each.
    - Created a wiki page
    - Added the DVWP to the page and hooked it in to the list. At this point I can see the items render fine
    - Uploaded the CSS to a folder in the style library and set the site to use it in the Master Page settings.
    - Uploaded the script to the same folder in the style library and modified the path.

    At this point all I see is the headings I created but no items underneath. It appears as if the CSS and jquery aren’t being picked up correctly as there aren’t any styles applied and nothing happens on hover. I viewed the source and checked that the relative URL resolves when I past it in my browser. I think I may not be added the classes correctly to the MegaMenuHeaders list. If I understand correctly the hoverintent also looks for these classes? I may have missed it in the article but I’m a little confused what to put in the CSSClass section and how it works with the lookup from the content list. I have tried #sub or sub or #row or row but I’m not sure I’m on the right track?

    Thank you

  10. Mark

    Hi again,

    I’ve made some progress! For some reason the .js files were coming through as blank when I view the contents in the MS Developer Toolbar. I don’t know why this is. I managed to get it working by putting the files in the 14 hive and referencing them from the wikipage I created the DVWP on.

    A couple of further questions if I may:

    1. The heading orders seem to be based on alphabetical order? I have the order specified in the Headers table as Order in this case but it’s not being picked up and so to get “Heading4″ to display last I had to rename to “zzHeading4″

    2. Could someone please breakdown the steps to get this in a masterpage?

    Thanks

  11. Ad

    Hi Teylyn,

    Nice one!. Thanks alot for sharing this!

    Could you please give me the steps on how to incorporate this to my sharepoint 2010 online master page.

    Thanks in advance.

    Ad

  12. SBDDesigner

    Hi Teylyn, I am really interested in incorporating this mega menu into our SharePoint Intranet site. Could you please elaborate a little more on this part? “The last two columns, MegaHeader:Order and MegaHeader:CssClass are created by ticking their column names when defining the Lookup column for MegaHeader.”

    Thanks! :)

  13. SBDDesigner

    Thanks so much! That definitely helped. I have followed your other instructions but for some reason I am unable to get the hover to work. I have added the .txt file into a CEWP on the same page making sure the paths to my jquery.min.js and hover intent file are accurate to my folder location, also linked the style sheet into the page. When rendered and without the style sheet linked, I am seeing the unordered list with the and elements I added to the MegaHeader Content list, however, when I add the CSS, the LI’s disappear (as they shoud) but they do not reappear when I move my mouse over the header. What might I be missing? I appreciate any input you may have.

  14. Sean

    Excellent work. Thanks very much for posting this article. Everything works flawlessly!

  15. J.R.

    This is really good work, can you explain what the ItemNumber field is for, it doesn’t seem to have an affect.
    Cheers, J.R.

  16. konkol

    Hi teylyn,

    Great stuff!
    Got 2 questions:
    1. what exaclty should be entered into the CSSClass column? Can you give an example for the “Home” tab
    2. how to add a link to the “Home” (or any other) tab which does not contain any sub items.

    Many thanks in advance!
    k

  17. Naveen

    Excellent teylyn, Great explanation, keep it up. I was able to implement all of it, one question though for some reason I’m not defining the lists properly so xsl is not generating classes properly, Do you mine posting the images of the lists ? I need both of them. thanks for the help.

    –Naveen

  18. Norrie

    Hi Teylyn,

    Thanks for posting this blog. I’m a newbie to SharePoint development. I’ve tried to follow your steps as outlined. I’ve created the lists and the DVWP per your instructions and they seem to be ok. However, I can’t get the css working. I am using the stylesheet you posted and reference it in the masterpage. It is being seen as I’m getting the green background colour. However, the headings are defaulting to other href settings. I’m assuming the problem is with the way in which I’m identifying the classes in the MegaMenu Header. Could you please tell me if I wanted to use the – ul#topnavlist a.FirstTab – how should I write this in the CssClass field? I’ve tried numerous variations but nothing seems to be working. I’d appreciate any guidance you could give me on this.

    Thanks in advance

    Norrie

  19. Dave

    Would it be possible to get the css, xsl, js and image files zipped up that you used for the demo. I am having the same difficulty as SBDDesigner with no luck.

  20. Dave

    Thank you Teylyn. I really appreciate your willingness to help me understand the whole pcture.

  21. Robert

    Is it possible to create extra levels/layers to this Megamenu? I imagine it would involve creating a third and maybe even a fourth SharePoint list, rendering them in the nested list structure of the webpart XSL, and then changing the CSS a little? I’m a beginner, so if this is possible I’d appreciate a more detailed explanation of how I could do it. Thanks!

  22. Nathan

    I’m stuck and confused.

    I added 1 item to the Header list, using a CSS class of “topnav” because that’s what’s in your CSS.

    I included the script with a CEWP and pointed it to the correct JS files.

    I just get my single link without any styling. Not sure what to look for now.

  23. Rob

    Hi, really useful, but I have made a couple of alterations to my version and pass these on in the hope that they will be of use.
    I needed to put a xsl:sort after each xsl:for-each to ensure that the required positions were obayed – otherwise I ended up with the items going into the drop downs in the order that they were entered (or modified).
    I made the images clickable by wrapping them in an href,

    I then disabled the @title if there is an image and a link.

  24. Chely

    Hi,

    Thanks for sharing this. very useful.

    I have 2 questions:

    1. Could you please give me an example of the content table?
    I’m trying to set the rows & columns values, and it doesn’t look as I expected.

    2. I want a menu with 2 rows, each row has 3 columns, and another column shared to the 2 rows, with rowspan= 2, how can I do it?

    Thank you :)

  25. dilip

    Hi teylyn,

    How to link CSS and JS files in master page to get the megamenu styles when a DVWP is inserted in master page.Can you ple let know the exact link tag.I am storing the CSS and JS files in a shared document library

    Thanks in Advance
    Dilip Kumar

    1. dilip

      Hi teylyn,

      Thanks for your quick reply.I am trying this in sharepoint 2013 online. Hope this will work with sharepoint online too.

      I need some more information about the lookup columns

      MegaHeader Lookup –>The lookup must be done with title field in the first list?
      MegaHeader:Order Lookup–> The lookup must be done with order field in the first list?
      MegaHeader:CssClass Lookup –>The lookup must be done with CSSclass field in the first list?

      Thanks in advance

  26. dilip

    Hi teylyn,

    Everything works fine but the jquery is not firing on hover i have referenced the jquery paths in master page and even tried with content editior webpart. but no luck your suggestions/help is appreciated.

    Thanks

  27. Dilip

    Hi teylyn,

    I have custom jquey files which i have stored in my sites style library and given the correct path from my site.Still its not firing when i click site setting it seems the page lods twice.

  28. Dilip

    Hi teylyn,

    The sharepoint version is sharepoint 2013 its on office 365.

    Thanks
    Dilip Kumar

  29. Moss

    Hi teylyn,
    Great post , i was trying to make it work since morning, header menu are loading but not loading the child menu. Do you have any working files you can send me please?

    Really appreciate your help..