none
Mega Menu Navigation for Sharepoint 2010 Site

    Question

  • We need a mega menu navigation in our sharepoint 2010 portal. We decided to store the menu content in sharepoint list. We are planning to fetch the data from list and populate the mega menu. Can anybody share example with entire code. Using  CSS and Jquery are  preferable.

    I need the CSS and Jquery files which already developed for the mega menu functionality. I appreciate if anybody provide the code with explanation.

    Thank you in advance

    Tuesday, February 07, 2012 7:48 AM

Answers

  • Hello,

    I see you've made a great start.

    1.)  To make the tabs show up, you must make sure that the entries in the list MegaMenu Headers and the class names in the CSS file are exactly the same.

    For example, if you have the following entry in the MegaMenu Headers list:

    Title Order CssClass
    About Us 1 AboutUs
    Products 2 Products
    Services 3 Services

    ... then your CSS file must have these classes as well. The CSS file must contain:

    ul#topnav li:hover a, ul#topnav li a:hover { background- } /*--Hover State--*/
    ul#topnav a.AboutUs {
    /*--	background: url(nav_first.png) no-repeat; --*/
    	width: 78px;
    }
    ul#topnav a.Products {
    /*	background: url(nav_second.png) no-repeat; */
    	width: 117px;
    }
    ul#topnav a.Services {
    /*	background: url(nav_third.png) no-repeat;  */
    	width: 124px;

    You also need to prepare and upload the image files that are used as the background for the tabs. Have you done that? Make sure you are using the correct file names and file path. If you load the images into the same folder as the CSS file, then you just need the file name. If the images are in a different folder, you must specify the path to that folder and the file name. 

    Finally, you need to adjust the width of the elements. 

    Are you comfortable with CSS? It can be a bit daunting in the beginning.

    2.) If you want to create a heading (the yellow text), you need to enter text in the "Title" field. If you want to add a hyperlink to that heading, enter the URL into the field "MenuLink" in the list MegaMenu Content.

    An entry in the Title field will be a heading in the menu.

    Add a URL in the MenuLink and it will be a hyperlinked heading.

    Enter just the MenuLink with the link text and URL and it will be a standard link.


    cheers, teylyn




    Tuesday, February 14, 2012 9:20 AM

All replies

  • Hello,
     
    I've published an article on Nothingbutsharepoint.com how to create a mega menu with a DVWP fed by a SharePoint list. XSLT and CSS included. The links to the demo site (not my site) may be broken, but since you already know what a mega menu is, you won't need it anyway.
     
     

    cheers,

    [edit: An improved version of the article, links to demos that work and the complete resource files are available at http://www.teylyn.com/articles/sharepoint-articles/sharepoint-mega-menu-from-a-dvwp-and-a-list/  -- teylyn]


    cheers, teylyn

    Tuesday, February 07, 2012 9:37 AM
  • @ teylyn,

    I posted this question here after trying the example one which you suggested. I did not get the proper solution with that example.

    Anyway thank you for the reply.

    Regards

    Srikanth

    Wednesday, February 08, 2012 7:12 AM
  • So, what exactly is not working for you? The article I linked to contains the complete XSLT, CSS, and a description of the lists and columns required. 

    I have that same mega menu up and running on your company intranet, embedded in the master page and feeding into all sub sites.

    If you don't describe the problems you're running into, then nobody will be able to help. 




    cheers, teylyn

    Wednesday, February 08, 2012 7:22 AM
  • @ teylyn,

    Can you help me out to understand what exactly CSSClass column in MegaMenuHeaders list?

    How would I identify the css class names to append to the particular header text?

    Thank you

    Srikanth


    • Edited by Srikanth127 Thursday, February 09, 2012 12:22 PM
    Thursday, February 09, 2012 12:21 PM
  • Sure.

    The mega menu consists of nested lists, roughly like this

    <ul>
    	<li>
    		<a href="#" class="FirstTab" />
    		<ul>
    			<li>item</li>
    			<li>item</li>
    			<li>item</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="SecondTab" />
    		<ul>
    			<li>item</li>
    			<li>item</li>
    			<li>item</li>
    		</ul>
    	</li>
    	<li>
    		<a href="#" class="ThirdTab" />
    		<ul>
    			<li>item</li>
    			<li>item</li>
    			<li>item</li>
    		</ul>
    	</li>
    ....
    </ul>

    In the outer list, the links in the list items have classes assigned, so they can be styled by CSS

    In the CSS file you will find several classes for the top tabs of the mega menu

    ul#topnav a.FirstTab {
    /*--	background: url(nav_first.png) no-repeat; --*/
    	width: 78px;
    }
    ul#topnav a.SecondTab {
    /*	background: url(nav_second.png) no-repeat; */
    	width: 117px;
    }
    ul#topnav a.ThirdTab {
    etc ....

    The XSL will use data from the SharePoint list to write the correct CSS class into the final HTML code. The MegaMenu Headers list has a colum for CssClass, where you manually enter the name of the CSS class you want to assign to that particular top menu item. The MegaMenu Content list uses a lookup column to the Header list for the corresponding top menu item and also reads the CSS class for that item, so everything is in one place for the CQWP.

    In the XSL the CSS class is worked into a tag with this code:

    		<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">

    The following is the corresponding rendered HTML from my portal site:The CSS for "FirstTab" and "SecondTab" will do the positioning and styling accordingly.

    <ul id="topnav">
    	<li>
    		<a href="#" class="FirstTab" >About Us</a>
    		<span class="sub" style="left:-px;">
    			<div>
    				<div class="row">
    					<ul >
    						<li>Menu Item 1</li>
    						<li>Menu Item 2</li>
    					</ul>
    				</div>
    			</div>
    		</span>
    	</li>
    	<li>
    		<a href="#" class="SecondTab" >Projects</a>
    		<span class="sub" style="left:-px;">
    			<div>
    				<div class="row">
    					<ul>
    						<li>Menu Item 1</li>
    						<li>Menu Item 2</li>
    					</ul>
    				</div>
    			</div>
    		</span>
    	</li>
    </ul>

    does that help?


    cheers, teylyn


    Friday, February 10, 2012 12:23 AM
  • @teyltn :

    Thank you for your reply. Could you give your valid suggestion?

    I have gone throught the Nothing But Sharepoint site and got the result like below.

    My Work

    1. Why CSS is not applied to top level tabs? (I entered the CSS Class names in Header list)

    2. How can I get the the sub headings like highlighted below?

    3. How to add href to sublinks?

    Thank you

    Srikanth

    Tuesday, February 14, 2012 7:42 AM
  • Hello,

    I see you've made a great start.

    1.)  To make the tabs show up, you must make sure that the entries in the list MegaMenu Headers and the class names in the CSS file are exactly the same.

    For example, if you have the following entry in the MegaMenu Headers list:

    Title Order CssClass
    About Us 1 AboutUs
    Products 2 Products
    Services 3 Services

    ... then your CSS file must have these classes as well. The CSS file must contain:

    ul#topnav li:hover a, ul#topnav li a:hover { background- } /*--Hover State--*/
    ul#topnav a.AboutUs {
    /*--	background: url(nav_first.png) no-repeat; --*/
    	width: 78px;
    }
    ul#topnav a.Products {
    /*	background: url(nav_second.png) no-repeat; */
    	width: 117px;
    }
    ul#topnav a.Services {
    /*	background: url(nav_third.png) no-repeat;  */
    	width: 124px;

    You also need to prepare and upload the image files that are used as the background for the tabs. Have you done that? Make sure you are using the correct file names and file path. If you load the images into the same folder as the CSS file, then you just need the file name. If the images are in a different folder, you must specify the path to that folder and the file name. 

    Finally, you need to adjust the width of the elements. 

    Are you comfortable with CSS? It can be a bit daunting in the beginning.

    2.) If you want to create a heading (the yellow text), you need to enter text in the "Title" field. If you want to add a hyperlink to that heading, enter the URL into the field "MenuLink" in the list MegaMenu Content.

    An entry in the Title field will be a heading in the menu.

    Add a URL in the MenuLink and it will be a hyperlinked heading.

    Enter just the MenuLink with the link text and URL and it will be a standard link.


    cheers, teylyn




    Tuesday, February 14, 2012 9:20 AM
  • @teyltn;

    Quick question here.

    Can I apply this solution to Sharepoint 365?

    If not any suggestions / tips?

    Thanks in advance!

    Ad

    Wednesday, April 18, 2012 3:44 PM
  • Hello,

    I'm afraid I don't have any experience with 365 and what's doable or not, so I can't really say. If SharePoint 365 supports DVWPs and can be edited with SharePoint Designer, then I don't see why it should not work. I'ts just a list and a DVWP, after all. 

    cheers, 


    cheers, teylyn

    Thursday, April 19, 2012 4:41 AM
  • First off Teylyn great job on this Mega Menu for sharepoint. At first it was a bit confusing and I was concerned it wasn't going to come together but after some tweaks here and there I was able to achieve what I'm looking for. However I do have a question for you that hopefully you can answer. I have created a Header for "Home". Now of course Home will not have any sub links, but if I don't add it to content it doesn't show up at all on my global navigation. How exactly do I go about getting "Home" to appear but not be listed with sublinks?

    Again thank you for your tutorial, definitely came through on this one.

    Wednesday, April 25, 2012 1:28 AM
  • Hello omghi2u,

    thanks for the feedback and glad you like the approach. Actually, I had the same situation come up in my deployment. The code as posted in the article and above goes like this:

    		<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">

    What you need to do is to insert your "Home" button as a list item before the Header loop. Here is what I have in my company's intranet site on the home page:

    <xsl:template name="Setup"> <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/> <!-- start unordered list for the navigation top tabs --> <ul id="topnav"> <li class="Home"> <a class="Home" href="/intranet/portal">Home</a> </li> <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 class="{$LinkClass}"> <xsl:value-of select="$LinkVar" disable-output-escaping="yes"/>

    Right after starting the UL with the ID "topnav", manually insert a LI element for the Home tab. Don't forget to style it in your CSS file!!

    cheers, teylyn


    cheers, teylyn

    Wednesday, April 25, 2012 8:33 AM
  • Once again thank you so much!!! You're making me look good ;) hahaha
    Wednesday, April 25, 2012 11:42 PM
  • @teylyn

    I have ran into an issue and wondering if you or anyone you know is running into this same problem. I've got the mega menu setup and looking good. The problem I'm having is that when I restore down my browser window to a smaller size the Mega Menu itself then drops down to a 2layered menu opposed to the straight across and it either overlaps the left quick launch or goes underneath the quick launch. Keep in mind this is with IE7 as the browser, in FF13 it looks great and pushes everything down. I can surely supply a screenshot if needed to see but I'm hoping my description gives a proper idea of whats happening. I've tried changing some settings in the css but nothing seems to be working. Hopefully you've ran across this in your time.


    omghi2u

    Saturday, August 11, 2012 2:11 AM
  • How about wrapping a div around the mega menu and set that div to a fixed width or a min-width value? That should prevent the menu from breaking into two rows.


    cheers, teylyn
    www.teylyn.com

    Saturday, August 11, 2012 3:40 AM
  • <div id="s4-topheader2" class="s4-pr s4-notdlg">
    <!--MegaMenu Global Navigation-->
    <custom:MegaMenu id="MegaMenu" runat="server"/>
    <div id="s4-searcharea" class="s4-search s4-rp">
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server" Visible="false">
    <SharePoint:DelegateControl ID="DelegateControl4" runat="server" ControlId="SmallSearchInputBox" Version="4"/>
    </asp:ContentPlaceHolder>
    </div>
    <div class="s4-rp s4-app">
    </div>
    <div class="s4-lp s4-toplinks">
    <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
    <h2 class="ms-hidden">
    <SharePoint:EncodedLiteral ID="EncodedLiteral5" runat="server" text="<%$Resources:wss,topnav_pagetitle%>" EncodeMethod="HtmlEncode"/></h2>
    <asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
    </asp:ContentPlaceHolder>
    </asp:ContentPlaceHolder>
    </div>
    The above is the current setup for my master page in 2010 using the mega menu. I've given the s4-topheader2 div both min-width and width, neither seems to work as it still drops the menu down into 2 rows if the browser is not opened fully. It seems to act as if its on its own div and following some other instructions of how to setup. I may have to dig deeper into the mega menu control to see wtf is going on, but IE7 and this mega menu are really putting the hate down I tell ya. If you see anything in what I've posted that may alarm you and think I could try differently please let me know. I appreciate all this help.

    omghi2u

    Tuesday, August 14, 2012 1:32 AM
  • Another idea: if your mega menu is xxx px wide, then create an image of one px high and xxx px wide. Make it a GIF and make it transparent. Then load that as the background image in the containing div or throw it into the div as the first piece before the mega menu. 

    My site has a fixed width centrered layout and a background image that gets loaded before the mega menu, so the wrapping is never really an issue.


    cheers, teylyn
    www.teylyn.com

    Tuesday, August 14, 2012 2:02 AM
  • Your suggestion definitely worked for keeping the mega menu from forming 2 rows when the browser is downsized. However the difference with my setup to yours is that our SP2010 is a full page layout, your's is a centered layout and I can see how you can control the resizing a lot better than we can. The issue I'm facing now is that even though I am able to keep the mega menu on 1 row, the entire site still resizes leaving the mega menu to extend outside of the masterpage into a gray void of nothingness. I really appreciate the help you've provided Teylyn.

    omghi2u

    Thursday, August 16, 2012 8:39 PM
  • Glad to learn that the mega menu now stays in one row.

    I'm not quite sure I understand what you are trying to achieve. Do you WANT the other elements of the page to re-size? If not, you can apply the same principles (adding an image to secure the width of a div) to the other elements of your master page. 

    Any situation can be catered for, but you need to define the requirements. You need to think through and define how you want your page elements to behave when the browser window is maximised or resized. Once you have that defined, appropriate methods can be implemented.


    cheers, teylyn
    www.teylyn.com

    Friday, August 17, 2012 9:05 AM
  • Hi there,

    I would like to know, what did you do to feed the subsites with the same megamenu....Im stuck trying this.

    I have embed the megamenu in the masterpage, I called the scripts, but when I create a subsite it throws an error saying that the list, doesnt exist.

    I followed the steps right, but Im missing somthing, maybe a control to transform the megamenu in something global. I did put the dataview inside a div with class "megamenu" and to not show it on dialog boxes, and below that div I did put the javascript for the megamenu. Here's the code of my masterpage:

    				<div id="megamenu" class="megamenu s4-notdlg">
    				
    				
    				
    <WebPartPages:DataFormWebPart runat="server" Description="" ImportErrorMessage="No se puede importar este elemento web." PartOrder="0" HelpLink="" AllowRemove="True" IsVisible="True" AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True" DataSourceID="" Title="MegaMenu Content" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True" FrameState="Normal" PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default" DetailLink="" ShowWithSampleData="False" ListId="44247b26-ff56-4311-bdd3-52b89f26ed7d" ListName="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" FrameType="None" PartImageSmall="" IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False" ChromeType="None" AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId="" InitialAsyncDataFetch="False" MissingAssembly="No se puede importar este elemento web." HelpMode="Modeless" ID="g_c52d2e79_f548_478d_bfc3_5421f42d8dde" ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True" IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{C52D2E79-F548-478D-BFC3-5421F42D8DDE}" __AllowXSLTEditing="true" WebPart="true" Height="" Width=""><ParameterBindings>
    	<ParameterBinding Name="ListID" Location="None" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}"/>
    	<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
    	<ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
    	<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
    	<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
    </ParameterBindings>
    <DataFields>@MegaHeader,MegaHeader;@MenuRow,MenuRow;@MenuColumn,MenuColumn;@ItemNumber,ItemNumber;@Title,Título;@MenuLink,MenuLink;@ItemImage,ItemImage;@ItemBody,ItemBody;@Published,Published;@ItemWidth,ItemWidth;@MegaHeader_x003a_Order,MegaHeader:Order;@MegaHeader_x003a_CssClass,MegaHeader:CssClass;@ID,ID;@ContentType,Tipo de contenido;@Modified,Modificado;@Created,Creado;@Author,Creado por;@Editor,Modificado por;@_UIVersionString,Versión;@Attachments,Datos adjuntos;@File_x0020_Type,Tipo de archivo;@FileLeafRef,Nombre (para uso en formularios);@FileDirRef,Ruta de acceso;@FSObjType,Tipo de elemento;@_HasCopyDestinations,Tiene destinos de copia;@_CopySource,Copiar origen;@ContentTypeId,Id. de tipos de contenido;@_ModerationStatus,Estado de aprobación;@_UIVersion,Versión de IU;@Created_x0020_Date,Creado;@FileRef,Dirección URL;@ItemChildCount,Número secundario de elemento;@FolderChildCount,Recuento secundario de carpetas;</DataFields>
    <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>
    <DataSources>
    <SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;MegaHeader_x003a_Order&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;MenuRow&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;MenuColumn&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;ItemNumber&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;Published&quot;/&gt;&lt;Value Type=&quot;Boolean&quot;&gt;1&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" UseInternalName="True" UseServerDataFormat="True" ID="dataformwebpart1"><SelectParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </SelectParameters><UpdateParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </UpdateParameters><InsertParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </InsertParameters><DeleteParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </DeleteParameters>
    </SharePoint:SPDataSource>
    </DataSources>
    </WebPartPages:DataFormWebPart>
    				
    				
    				
    				</div>
    				<div class="MegamenuScript s4-notdlg">
    <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>
    				
    				</div>
    				
    			
    • Edited by Feibien Friday, August 31, 2012 4:26 AM the dataview code was the one with the problem, no need for whole masterpage code
    Thursday, August 30, 2012 10:45 PM
  • if you use the mega menu in a master page, you need to change some settings for the data source as described here:
    Remove every mention of ListId="44247b26-ff56-4311-bdd3-52b89f26ed7d"  and ListName="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" from the first line of the DVWP and anywhere else. 
    Then go to the DataSource tag near the end. You can delete the Delete, Update and Insert parameters and keep only the SelectParameter. Replace the 
    WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"
    with 
    WebPartPages:DataFormParameter ParameterKey="ListName" PropertyName="ParameterValues" DefaultValue="MegaMenuContent" Name="ListName"
    Make sure you have your exact list name here DefaultValue="MegaMenuContent", then add one WebPartPages:DataFormParameter tag for the URL. I cannot post the < tags > in this email, but inside the tags it should look like this:
    WebPartPages:DataFormParameter Name="WebURL" ParameterKey="WebURL"PropertyName="ParameterValues" DefaultValue="/" 

    If your list is not at the root level, then enter the relative URL into the DefaultValue, for example DefaultValue="/site/subsite/"

    cheers, teylyn


    cheers, teylyn
    www.teylyn.com

    Friday, August 31, 2012 1:28 AM
  • Thank you so much, just in case someone had the same problem this is exactly what I did

    First lines of the dataview

    Original code


    <WebPartPages:DataFormWebPart runat="server" Description="" ImportErrorMessage="No se puede importar este elemento web." PartOrder="0" HelpLink="" AllowRemove="True" IsVisible="True" AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True" DataSourceID="" Title="MegaMenu Content" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True" FrameState="Normal" PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default" DetailLink="" ShowWithSampleData="False" ListId="44247b26-ff56-4311-bdd3-52b89f26ed7d" ListName="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" FrameType="None" PartImageSmall="" IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False" ChromeType="None" AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId="" InitialAsyncDataFetch="False" MissingAssembly="No se puede importar este elemento web." HelpMode="Modeless" ID="g_c52d2e79_f548_478d_bfc3_5421f42d8dde" ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True" IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{C52D2E79-F548-478D-BFC3-5421F42D8DDE}" __AllowXSLTEditing="true" WebPart="true" Height="" Width=""><ParameterBindings>
    	<ParameterBinding Name="ListID" Location="None" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}"/>
    	<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
    	<ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
    	<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
    	<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>

    Modified code

    <WebPartPages:DataFormWebPart runat="server" Description="" ImportErrorMessage="No se puede importar este elemento web." PartOrder="0" HelpLink="" AllowRemove="True" IsVisible="True" AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True" DataSourceID="" Title="MegaMenu Content" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True" FrameState="Normal" PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default" DetailLink="" ShowWithSampleData="False" FrameType="None" PartImageSmall="" IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False" ChromeType="None" AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId="" InitialAsyncDataFetch="False" MissingAssembly="No se puede importar este elemento web." HelpMode="Modeless" ID="g_c52d2e79_f548_478d_bfc3_5421f42d8dde" ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True" IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{C52D2E79-F548-478D-BFC3-5421F42D8DDE}" __AllowXSLTEditing="true" WebPart="true" Height="" Width=""><ParameterBindings>
    	<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
    	<ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
    	<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
    	<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
    </ParameterBindings>

    Now near the end

    Original Code

    </xsl:stylesheet></Xsl>
    <DataSources>
    <SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;MegaHeader_x003a_Order&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;MenuRow&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;MenuColumn&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;ItemNumber&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;Published&quot;/&gt;&lt;Value Type=&quot;Boolean&quot;&gt;1&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" UseInternalName="True" UseServerDataFormat="True" ID="dataformwebpart1"><SelectParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </SelectParameters><UpdateParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </UpdateParameters><InsertParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </InsertParameters><DeleteParameters><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{44247B26-FF56-4311-BDD3-52B89F26ED7D}" Name="ListID"></WebPartPages:DataFormParameter>
    </DeleteParameters>
    </SharePoint:SPDataSource>
    </DataSources>
    </WebPartPages:DataFormWebPart>

    Modified Code

    </xsl:stylesheet></Xsl>
    <DataSources>
    <SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;MegaHeader_x003a_Order&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;MenuRow&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;MenuColumn&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;FieldRef Name=&quot;ItemNumber&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;Published&quot;/&gt;&lt;Value Type=&quot;Boolean&quot;&gt;1&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" UseInternalName="True" UseServerDataFormat="True" ID="dataformwebpart1"><SelectParameters><WebPartPages:DataFormParameter ParameterKey="ListName" PropertyName="ParameterValues" DefaultValue="MegaMenu Content" Name="ListName"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter Name="WebURL" ParameterKey="WebURL" PropertyName="ParameterValues" DefaultValue="/"></WebPartPages:DataFormParameter>
    </SelectParameters>
    </SharePoint:SPDataSource>
    </DataSources>
    </WebPartPages:DataFormWebPart>

    My list had a space in name and also was in root, some changes must be done if the list is inside other site as teylyn mentioned.

    Again thank you so much teylyn!



    • Edited by Feibien Friday, August 31, 2012 4:22 AM
    Friday, August 31, 2012 4:20 AM