Supporters of End User
Web

A MegaMenu for SharePoint 2010 Using a DVWP and a List

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:SharePoint Designer; Data View Web Part; Javascript and jQuery; CSS; Libraries and Lists; Site Manager/Power User; MOSS; WSS; 2007; 2010

Note:  The MegaMenu code can be downloaded here:

MegaMenuCSS

MegaMenuXSLT

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 into in order  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 posted at http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

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 is described here: http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery . In my Sharepoint site, it looks like this:

2011-11-18-MegaMenu-01.png

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:

2011-11-18-MegaMenu-03.png

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

Now populate 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 h3 element. A MenuLink for an item with a title is optional.

ItemWidth should be left at “default” unless you want a menu section 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. …
</ul>

This image shows the nested classes and divs. The top tabs are the elements of the outer ul/li.

2011-11-18-MegaMenu-02.png

red = <div class="sub">
orange = <div class="row">
purple = <ul> or <ul class="span2"> (the digit at the end of the “span2” will depend on the choice made in the ItemWidth column.

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: (the code can be found at the top of this article)


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 CssClass value for the current item and then concatenate that with the appropriate opening and closing brackets for the tag.

<xsl:variable name="LinkStart" select="string('<a href="#" class="')"/>
<xsl:variable name="LinkClass"><xsl:value-of select="@MegaHeader_x003a_CssClass"/></xsl:variable>
<xsl:variable name="LinkEnd" select="string('" >')"/>
<xsl:variable name="LinkVar" select="concat($LinkStart,$LinkClass,$LinkEnd)"/>
<xsl:variable name="CloseATag" select="string('</a>')"/>
<!-- 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('<ul ')"/>
<xsl:variable name="SpanTagClass">
	<xsl:choose>
		<xsl:when test="@ItemWidth != string('default')">
			<xsl:value-of select="concat(string('class="span'),@ItemWidth,string('" '))"/>
		</xsl:when>
		<xsl:otherwise>
			<xsl:value-of select="''"/>
		</xsl:otherwise>
	</xsl:choose>
</xsl:variable>
<xsl:variable name="SpanTagEnd" select="string('>')"/>
<xsl:variable name="SpanTagOpen" select="concat($SpanTagStart,$SpanTagClass,$SpanTagEnd)"/>
<xsl:variable name="SpanTagClose" select="string('</ul>')"/>
<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

Download the CSS from http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/ . 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 values named in the MegaMenu Headers list. For each, you need to specify image source files and position the tabs.

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 text 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 in the first two lines of the script. If you don’t use a Custom CSS file in your site, you can load the CSS via that script as well.

Test and publish

Now it’s time to test. If all goes well in the web part page, you can transfer the DVWP to 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.

The MegaMenu Header list is set up so it can only be changed by a designer, who knows that each change may require adjustments to the CSS.

The MegaMenu Content list can be changed by the marketing assistant, who can create/edit/delete menu items in the list. Using the Web Part page that has the single, unfiltered DVWP, the proper behavior of all items can be checked. If all is good, tick the “Publish” check box for the new menu items and they will appear in the filtered DVWP on the Master Page.

Mission accomplished.

Comments

Cliff

Thank you!

I have been using this exact mega menu, but had hard-coded it into my master page. This is so much better.

Posted 21-Nov-2011 by Cliff
Matthew Bramer

There are two sides to every story...

Just so readers make an informed decision before venturing down the mega menu path, an alternate view should be read as well. http://www.uie.com/articles/mega_menus/ Another post from Jacob Nielsen... http://www.useit.com/alertbox/mega-menus-wrong.html Thanks for posting your solution!

Posted 21-Nov-2011 by Matthew Bramer
Mark Miller

Nielsen is a fanatic

Jacob Nielsen is a fanatic. Whatever he says, I always view from that perspective. I think what Ingeborg has provided us here is a very usable solution that many people will find helpful not matter what Nielsen has to sa about mega-menus.

Posted 21-Nov-2011 by Mark Miller
Matthew Bramer

Nielsen was referenced...

I posted the last link because this article refers to a previous article that Neilsen wrote. I found the last link to be interesting and thought provoking. There are trade-offs to these mega-menus and they should be thought about.

Posted 21-Nov-2011 by Matthew Bramer
Seb Matthews

An Elegant Solution

Ignoring the discussion about JN and whether mega-menus are right or wrong (remember, choose the right horses for the courses) this is an elegant and effective solution for mega-menu implementation within SharePoint.
 
Hats Off!

Posted 22-Nov-2011 by Seb Matthews
Ingeborg Hawighorst

Heads up:

I just noticed that the script does not render as written in the original xsl. This is probably due to the site software displaying the written &_lt_; as and &_quot_; as ". In this comment, I added underscores so it does not happen here, too (this is really tricky, I hope it shows correctly). So, in each variable declaration that uses < or > or " inside the select="string('text')", you need to replace the < with a lt, > with a gt and " with a quot. These must each start with the & (ampersand) and finish with the ; (semicolon). Will "noparse" tags work to show the verbatim code in here? I'll ask Natasha to add the original xsl as a text file attachment.

Posted 22-Nov-2011 by Ingeborg Hawighorst
Jon

More info needed

Hi, looks great and exactly what I have been looking for. A couple of points....
 
1. The links to your website do not work
2. Not sure I can follow your last comment - when will the original code be uploaded?
 
Thanks for posting this.

Posted 22-Nov-2011 by Jon
Ingeborg Hawighorst

Website down

Hello Jon, that's the problem with links. The web site seems to be down at the moment. I cannot add anything to the article myself, but I'll ask for help from EUSP site managers.

Posted 22-Nov-2011 by Ingeborg Hawighorst
Ingeborg Hawighorst

Files posted in my SharePoint blog

Until this article gets updated with the correct code, you can download the XSLT and the CSS here: http://sharepointjourney.posterous.com/files-for-sharepoint-megamenu-xslt-and-css The demo web site linked to above seems to be down (it's not my site, and it's out of my control). Sorry for the inconvenience.

Posted 22-Nov-2011 by Ingeborg Hawighorst
Natasha Felshman

Article Updated

I've add links to the XSLT and CSS at the top of the article.  Sorry for any inconvenience.
 
Thanks,
Natasha

Posted 23-Nov-2011 by Natasha Felshman
Ingeborg Hawighorst

Thank you, Natasha!

Posted 23-Nov-2011 by Ingeborg Hawighorst
Monika

demo link doesn't work

I'm not sure if it's only me that's having this problem but nothing shows up when I click on the "demo" link.

Posted 21-Dec-2011 by Monika
Ingeborg Hawighorst

Demo of the MegaMenu

As is the way with the internet, sites get created, sites get abandoned. Links die. The link in my above article to the demo of the MegaMenu has died. Fear not. The Wayback machine comes to the rescue. Here are the links to the content that does not work anymore from the links above. MegaMenu Demo: http://web.archive.org/web/20110105095416/http://www.sohtanaka.com/web-design/examples/mega-dropdowns/ Background on the MegaMenu CSS and HTML structure: http://web.archive.org/web/20110105094808/http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/ cheers, teylyn

Posted 11-Feb-2012 by Ingeborg Hawighorst
Jonathan D

XSLT not being applied

We have implemented the menu with a few quirks.  The jquery files weren't being imported by the Content Editor so instead of using src files I just put all the jquery code actually in the html of the content editor and now it is working correctly.  We manually put the CSS in there too.  The menus pop up and look great.  However ... the CSS never gets applied to the top level tabs and it looks like the XSLT for that I put in the DVWP doesn't ever get applied.  If I remove the XSLT altogether in fact the menu works exactly the same ... any ideas why the XSLT wouldn't be applied or work correctly?  I am missing a setting somewhere?

Posted 13-Feb-2012 by Jonathan D
Jonathan D

XSLT not being applied

We have implemented the menu with a few quirks.  The jquery files weren't being imported by the Content Editor so instead of using src files I just put all the jquery code actually in the html of the content editor and now it is working correctly.  We manually put the CSS in there too.  The menus pop up and look great.  However ... the CSS never gets applied to the top level tabs and it looks like the XSLT for that I put in the DVWP doesn't ever get applied.  If I remove the XSLT altogether in fact the menu works exactly the same ... any ideas why the XSLT wouldn't be applied or work correctly?  I am missing a setting somewhere?

Posted 13-Feb-2012 by Jonathan D
Ad

Sharepoint Online / 365

Hi,
 
I just wonder if anyone here tested this to work in sharepoint online /365?
 
We're about to upgrade to sharepoint 365 E3 next month your confirmation would be very much appreciated...
 
Ad 

Posted 25-Apr-2012 by Ad
Gabriel

Thanks You!

Thanks Ingeborg. Even here in South Africa we appreciate your work very much

Posted 27-Jul-2012 by Gabriel
scocam

Added Links to the Headers

If anyone is interested, I've modified the MegaMenu slightly to allow the top headers to have links. I made the following changes: In the "MegaMenu Headers" List... Add a new "Single line of text" column called, "HeaderLink" In the "MegaMenu Items" List... Open the MegaHeader lookup column and add the "HeaderLink" column as another additional field. In the actual menu XSL... Find the following line: and replace it with this line: That's all. It may not be the optimal method but it was quick and it works for my client.

Posted 23-Aug-2012 by scocam
scocam

Added Links to the Headers (cont'd)

Oops. Code was stripped-out. Find this line in the XSL: "xsl:variable name="LinkVar" select="concat($LinkStart,$LinkClass,$LinkEnd)" and replace it with this line: "xsl:variable name="LinkVar" select="concat('<a href="',@MegaHeader_x003a_HeaderLink,'" class="',$LinkStart,$LinkClass,$LinkEnd)".

Posted 23-Aug-2012 by scocam
Gabriel

Added Links to the Headers

I have also made that functionality without an extra field. I have put an if on the XSLT such that when the title on the MegaMenuContent is null it must display the Title from MegaMenu Headers and use the link from MegaMenu Content

Posted 24-Aug-2012 by Gabriel
feibien

Megamenu on subsites

Hi,
 
Thanks for this megamenu its awesome. I just have a question, is there a way that this megamenu could be used on subsites?. I have tried this already, but after activating the publishing features, an error show up saying that the list doesnt exist.
 
Thanks in advance

Posted 30-Aug-2012 by feibien
Gabriel

Megamenu on subsites

Yes it is possible. I have taken the DVWP from SharePoint Designer into Visual Studio and placed it within a webpart. I made sure that the web part reads from the root site list.

Posted 31-Aug-2012 by Gabriel
Geoff

Applying Megamenu to subsites from the root site

I was having the same problem where I keep receiving "List not found" when I tried to insert the DVWP into my master page and have a sub-site use it. I found the answer at Marc Anderson's blog, http://sympmarc.com/2010/11/02/using-a-datasource-in-a-data-view-web-part-dvwp-in-a-different-site-in-sharepoint-designer-2010/ . Marc states that you will have to change WebPartPages:DataFormParameter and remove the listID and ListName from the WebPartPages:DataFormWebPart header of the DVWP. Basicaly I replaced the WebPartPages:DataFormParameter in the SelectParameters with two WebPartPages:DataFormParameter in Marc's example. I then changed the DefaultValue in the first WebPartPages:DataFormParameter to the name of the list I was using. To keep things simply I made MegaMenu Content List name MegaMenuContent, basicaly made it without any spaces, when I created the list. Please note: - You only need SelectParameters, you can get rid of the delete, update, and insert. - DO NOT change the ParameterBinding - If your list is on the root the second DefaultValue is "/" otherwise it is"/siteNameOfTheListLocation" Have Fun

Posted 11-Sep-2012 by Geoff
Ad

Applying Megamenu to subsites from the root site

@Geoff
 
Could you give us a sample? pleassssse :)
 
Thanks in Advance!

Posted 12-Oct-2012 by Ad
Ad

Applying Megamenu to subsites from the root site

@Geoff,
 
Don't bother I already figured how it works.
 
THANKS!

Posted 12-Oct-2012 by Ad
SPbb

Header as Link

@Gabriel
 
Could you please share the code..
 
Thanks!

Posted 26-Oct-2012 by SPbb
Gabriel

Header as link

@SPbb for what functionality? Header as Link?

Posted 26-Oct-2012 by Gabriel
Yaseen

MasterPage Error

I inserted a DVWP on the MasterPage 2010 its showing some error
Error
An unexpected error has occurred.
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: 83d2efc9-ef5d-4f34-b9c5-d651c9f32ab5 .
 
I have done this in 2007 its works fine but I dont know why its not working in 2010 Masterpage regardless of Publishing or non publishing sites.
 
I appreciated your help!.

Posted 08-Nov-2012 by Yaseen
Geoff

How to find the Correlation ID

@Yaseen. First thing we need to find out what is going on. in SharePoint 2010 Management Shell on the server type in "get-splogevent | ?{$_.Correlation -eq ""} | select Area, Category, Level, EventID, Message | Format-List". If you do not have access to the Management Shell you will need to either talk to the server admin to grant you farm access at the server level or have them do it for you. NOTE: replace the between the double quotes with the correlation id error, I.G. for Yaseen it would be 83d2efc9-ef5d-4f34-b9c5-d651c9f32ab5. you want to take a look at the second largest message. LINK: http://zimmergren.net/technical/sp-2010-find-error-messages-with-a-correlation-id-token-in-sharepoint-2010

Posted 26-Nov-2012 by Geoff
Geoff

How to find the Correlation ID P2

get-splogevent | ?{$_.Correlation -eq "83d2efc9-ef5d-4f34-b9c5-d651c9f32ab5"} | select Area, Category, Level, EventID, Message | Format-List

Posted 26-Nov-2012 by Geoff
Geoff

How to find the Correlation ID P2

get-splogevent | ?{$_.Correlation -eq "83d2efc9-ef5d-4f34-b9c5-d651c9f32ab5"} | select Area, Category, Level, EventID, Message | Format-List

Posted 26-Nov-2012 by Geoff
Robert

Create extra levels?

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!

Posted 28-Nov-2012 by Robert
Antony

Can someone tell me what should the CSSClass column cointain

Hi,
i'm not html developer and I new in CSS.
Can someone give example of what should the CCSClass column contain. I really do not understand the name of the CSS class i CSS file.
 
Thanks

Posted 11-Jan-2013 by Antony
Geoff

CSSClass

@Antony, Welcome to the discussion. In the CSSClass you want to give the parent menu item a class name that will allow you to target that html element so you will be able to manipulate the layout and design. For example, I have the menu parent Home and the CSSClass name I gave it is myHome which in HTMl would look like < li class=”myHome” >HOME< / li >. So in my CSS file I target it by typing .myHome { layoutcode }. Before you start working with xsl you learn more about CSS. W 3 Schools, http://www.w3schools.com/css/, has great tutorials. An another great place to learn CSS and html is http://www.codecademy.com/learn.

Posted 11-Jan-2013 by Geoff
Antony

CSSClass

Thank you.
It is working now for me.
 
One more question.
 - I've working DVWP with the XLS, CSS and Scrips. How to move this into the master page?
 

Posted 14-Jan-2013 by Antony
Ingeborg Hawighorst

Master page

You need to edit your master page and add the web part and the script links in the master page. This is also done in SharePoint Designer.

Posted 14-Jan-2013 by Ingeborg Hawighorst
Rachael

Header with no content

If your navigation has a combination of headers with and without content, on hover over one with no content, can you display nothing.  Right now a blank shell shows up.

Posted 21-Jan-2013 by Rachael
Matt

MEGAMENU goes off the screen

Hello, I've noticed if the menu in question is on the right side of the window it can end up going off of the screen. Obviously people would hate that if they came to the site. Is there an easy fix you could share? Thanks!

Posted 29-Jan-2013 by Matt
Maria

Library ribbon menu becomes inactive

Hi everyone,
we have applied the code to a master page and the menu looks ok.
However, there seems to be a problem when we started browsing different document libraries - the moment we select a different document library the library ribbon is greyed out and there is no setting that we can do.
Do you have any idea what could be the reason?
Thanks in advance,
Maria

Posted 31-Jan-2013 by Maria
Maria

Library ribbon menu becomes inactive

Hi again,
it appeared that there was some tag broken in the master page which was causing the error.
Redoing the master seemed to fix the problem.
Maria

Posted 31-Jan-2013 by Maria
SPbb

Heading is Broken after Sharepoint 2013 upgrade

Need Help! homecss">Home doccss" >Documents Any idea? Thanks in advance! SPbb

Posted 28-Mar-2013 by SPbb
majid

MasterPage Error on subsites

may i know how to fix the masterpages error
 
"List does not exist.
The page you selected contains a list that does not exist.  It may have been deleted by another user."
 
I have added the DVWP on masterpage. all working well. but as soon i create a subsite i get the above error.
 
also tried the WebPartPages:DataFormParameter thing but still not luck

Posted 04-Nov-2013 by majid
Geoff

RE: MasterPage Error on subsites


@majid
When you are pulling a list from one subsite to another or from the root to a subsite, vice versa, you need to change how the datasource reads it. Instead of having the DVWP read the list by ID you need to change it so it reads it by name and where it is located.
Mark Anderson wrote a great tutorial on how to do this:  http://sympmarc.com/2010/11/02/using-a-datasource-in-a-data-view-web-part-dvwp-in-a-different-site-in-sharepoint-designer-2010/
When you do this, don’t forget to remove the listID and List name from the WebPartPages:DataFormWebPart header.
This technique also works in 2013

 

 

Posted 10-Apr-2014 by Geoff

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: