A MegaMenu for a SharePoint portal home page
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?
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
- 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.
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:
|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)|
|ItemWidth||Choice (the choices are: “default, 2, 3, 4”. Make the default value “default”. The code below will look out for that.)|
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:
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:
[html toolbar=”true” highlight=”3,4,5″]
- Menu Item
- Menu Item
- Menu Item
<li>Next Header tab … etc</li>
This image shows the nested classes and divs:
- , 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 tag. Make sure to keep the opening tags intact.
Without further ado, here is the template code that I used, starting with the tag: