Article
68 comments

Build a flexible mega drop down navigation for SharePoint

I’ve read a lot of good articles about mega menus or mega drop in the past. They all were from a technical point of view correct and useful introduction about the basics behind. When it comes to SharePoint you should always consider the user and how they can administer or change the design on their own. This is one of the strengths in SharePoint and the user should always be in the center of every solution. For a mega menu it doesn’t take much to accomplish. This can be done easily in SharePoint Designer or Visual Studio. Choose your weapon of choice and spend 30 Minutes to build up a simple but powerful mega menu.

The ingredients and how they work together

In general a mega menu is nothing more than an HTML Snippet that will be loaded when a user hover over a navigation item. This can be the top navigation or in SharePoint terms the quick launch navigation. For embedding to the quick launch the code only needs to be slightly changed.

The base of the mega menu is a customized article page that has a web part zone for the drop down content. The navigation is the out of the box navigation that should be extended for the following tasks

  • Hover over a navigation item
  • Grab the link URL
  • Load the linked page
  • Cut out the required web part zone
  • Add it to the page as the content of the mega drop down

To accomplish those tasks the well-known JavaScript library Jquery will be used.

The article page

In general to define the content of the mega menu any mega menu can be used as a starting point. The only thing that needs to be done is to encapsulate any web part zone into a <div> element.

Mockup Mega Drop Down Article Page

Mockup Mega Drop Down Article Page

The code for this is simple and looks like this:

...
<ContentTemplate>
 <div class="article article-right">
 <PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel">
 <SharePointWebControls:TextField runat="server" FieldName="Title"/>
 </PublishingWebControls:EditModePanel>
 <div class="n8d-dropdown" id="megadropdownitem">
 <WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="TopZone" FrameType="None" Title="<%$Resources:cms,WebPartZoneTitle_Top%>" Orientation="Vertical" />
 </div>
</ContentTemplate>
...

 

The script that performs the mega menu magic will simply grab the defined <div> element with all the content in it and adds it to the navigation. Then the author will be able to add content to their demand or change existing content without any single line of code. The only thing that needs to be defined is styled to show the content in a proper way.

The master page

The second thing that is required for this solution is a master page. This is only needed to register the required styles and Jquery scripts. In the default configuration of the master page SharePoint already have a fly out navigation.

....
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
 <script src="/_layouts/n8d.MegaMenu/MegaMenu.js?x50826" type="text/javascript"></script>
 <link type="text/css" href='/_layouts/n8d.MegaMenu/MegaDropDown.css?x50826' rel="stylesheet" />
...

To avoid possible conflicts with the script, the navigation control needs to be modified. This can be done by changing the properties for the MaximumDynamicDisplayLevels. It needs to be set from the default value which is 1 and needs to be set 0. This means that no dynamic children will be rendered.

...
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
 <SharePoint:AspMenu
 ID="TopNavigationMenuV4"
 Runat="server"
 EnableViewState="false"
 DataSourceID="topSiteMap"
 AccessKey="<%$Resources:wss,navigation_accesskey%>"
 UseSimpleRendering="true"
 UseSeparateCss="false"
 Orientation="Horizontal"
 StaticDisplayLevels="2"
 MaximumDynamicDisplayLevels="0"
 SkipLinkText=""
 CssClass="s4-tn" />
   <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
     <Template_Controls>
       <asp:SiteMapDataSource
        ShowStartingNode="False"
        SiteMapProvider="SPNavigationProvider"
        id="topSiteMap"
        runat="server"
        StartingNodeUrl="sid:1002"/>
     </Template_Controls>
   </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>
...

Now that the base setup is done it’s time for some JQuery magic.

The Mega Menu Script

As mentioned before the script doesn’t do much. So when the page is loaded JQuery grabs all URL from the top navigation and looks for content that should be added to the navigation. This will be done by inserting a new <div> element directly on every item of the top navigation. This will be done by the following function.

var loadingData = function(){

    var navigationElement = $(this);
    var link = $(this).attr("href");
    var text = $(this).find(".menu-item-text").text();
    $(this).attr("linkname", text);

    $.ajax({
            url: link,
            async: false,
            dataType: "html",
            success: 
                function (data) {
                    content = $(data).find("#megadropdownitem");
                    
                    if(content.html() != undefined){
                        // fix content for calender
                        content.find(".ms-WPBody").each(function () {
                            $(this).removeAttr("webpartid");
                            $(this).removeAttr("class");
                            $(this).removeAttr("id");
                        })
                        newContent = "<div class='mdd-itemcontent'><div class='mdd-innercontent'>"+content.html()+"</div></div>";
                        navigationElement.parent().prepend(newContent);
                    }
                }
    });

}

For the animation of the flyout i simply added a hover binding to all of the navigation items.

$(document).ready(function(){

    var pageMode = $("#MSOSPWebPartManager_DisplayModeName");

    if(pageMode.val() == "Browse"){
        $(".s4-tn li.static a.static").each(loadingData);
        $(".s4-tn li.static").hover(showFlyOut, hideFlyOut);
    }
});

var showFlyOut = function(){
    if($(this).children(".mdd-itemcontent").html() != null){
        $(this).children(".menu-item").toggleClass("hover");
        $(this).children(".mdd-itemcontent").slideDown("fast");
    }
}

var hideFlyOut = function(){
    if($(this).children(".mdd-itemcontent").html() != null){
        $(this).children(".menu-item").toggleClass("hover");
        $(this).children(".mdd-itemcontent").slideUp("fast");
    }
}

The functions showFlyout and hideFlyout will show and hide the mega menu / flyout and also the class of the current selected navigation item will be toggled for a better styling. The last step was to add the design for the menu. After that the mega menu looks like this.

Finished look of the mega drop down

Finished look of the mega drop down

Let me show you how the solution works in the following video.

How to create a mega menu navigation in SharePoint from Stefan Bauer on Vimeo.

As seen in the solution the content of the mega drop down is flexible. Static or dynamic content can be added without changing the core functionality. No server side code is required, which makes it easy to adapt for SharePoint 2013. By changing the style sheets the form of the drop down can be easily adapted. While I used visual studio to deploy my solution this functionality can be added by using SharePoint Designer too. I think the most time consuming task in my mega menu solution are the design adoption but a simple drop down menu can be accomplished in 30 minutes. Would be great if you can share your experience with my solution. Finally what’s left to say have fun in creating you own variations.

Update Nov 19, 2013: Bugfix Calendar Web Part

As David Foster and Scott McLeod pointed out in the comments there is an error when a calendar will be used. The items were delegated to the mega menu instead of the list web part. The solution below is updated and contains the fixed version.

Download Visual Studio Solution

Article
78 comments

Turn summary link web part into an accordion

In SharePoint the summary link web part is a great tool to create overviews made of internal and external links. The challenge with this web part is to enhance the presentation when a lot of links will be added to this web part. In this post I will present how to turn this basic web part to an accordion which gives the user a much better experience.

Styling the summary link web part

First of all I created a simple summary link web part and added grouping of those links. As you see the amount of links are not that much but enough that specific links are hard to read and find the belonging groups as well.

summary link web part

summary link web part

To enhance the default style I simply added a content editor web part to the page that contains my new style definition. To improve the group header I simply added a style definition for the CSS class “groupheader”. I also added some styling for the links as well.

.groupheader{
	background-color: #0072C6;
	color: white;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 140%;
	padding: 0.5em;
	padding-left: 0.75em;
	margin-right: 0.5em;
	margin-bottom: 1px;
}

.groupmarker:hover .groupheader{
	cursor: pointer;
	background-color: #0597FF;
}

.dfwp-list{
	background-color: #0072C6;
	margin-bottom: 0.5em;
	margin-right: 0.75em;
}
.dfwp-list .item:hover{
	background-color: #0597FF;
}
.dfwp-list .link-item a{
	margin-left: 2em;
	color: white;
}

The style definitions transform the web part now into a metro styled web part. For the user experience I also added a hover effect using CSS. This allows to highlight the currently selected link.

styled summary link web part

styled summary link web part

Add accordion script

The turn this web part now into a fully functional accordion all that needs to be done is to add a simple Jquery script the performs the following tasks.

  • Hide all hyperlinks in the groups
  • When a user clicks a group header
    • Hide all sections that is not the current header
    • Expand current selected link section

This can be accomplished with the following code.

$(document).ready(function(){

		/* Slide up all link items and hide them */
		$(".dfwp-list").slideUp("fast");
		/* Binding a click event handler to the links: */
		$('.groupheader').click(function(e){

			/* Finding the drop down list that corresponds to the current section: */
			var dropDown = $(this).next(".dfwp-list");

			/* Closing all other drop down sections, except the current one */
			$('.dfwp-list').not(dropDown).slideUp('slow');
			dropDown.slideToggle('slow');

			/* Preventing the default event (which would be to navigate the browser to the link's address) */
			e.preventDefault();
		})
})

Now the web part has turned into an accordion with expandable sections, but there is one last step to do. The accordion is currently not editable but this can be fixed with a simple modification of the script.

Make accordion editable again

SharePoint has something called display mode. This display mode indicates how a user has opened a page and can have the following values:

  • Browse – indicates that the user views the page
  • Design – indicates that the user tries to edit the page

Normally this form context or display mode is use is web part development but it could be used and detected using Jquery. SharePoint renders a hidden input field with the id ”MSOSPWebPartManager_DisplayModeName” that will be set to the appropriate value.

For example the field can look like this if the page is opened in browse mode.

<input type="hidden" name="MSOSPWebPartManager_DisplayModeName" id="MSOSPWebPartManager_DisplayModeName" value="Browse" />

To restore the edit function all that needs to be done is to wrap the script and let it only get executed in browse mode.

$(document).ready(function(){

	// Detect if user view or edit the page
	if($("#MSOSPWebPartManager_DisplayModeName").val() == "Browse"){
		// Register accordion
		accordion();
	}

})

var accordion = function(){

	/* Do fancy easing */
	$.easing.def = "easeOutBounce";

	/* Slide up all link items and hide them */
	$(".dfwp-list").slideUp("fast");
	/* Binding a click event handler to the links: */
	$('.groupheader').click(function(e){

		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).next(".dfwp-list");

		/* Closing all other drop down sections, except the current one */
		$('.dfwp-list').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');

	})
}

The last thing I want to show is the accordion live in action.

Download Accordion Content Editor Web Part – SharePoint 2007 / SharePoint 2010

Article
18 comments

Centered fixed width design in SharePoint 2010 – The fast way

If you are looking for a way to create a fixed width design in SharePoint 2013 follow the white rabbit.

There are a lot of fixed width master page solutions available on the internet and I read a lot of those solutions. Some of those require JavaScript or don’t respect the ribbon, which means that the ribbon will placed inside the fixed width design. SharePoint is smart enough to handle small screen resolutions by compacting and rearrange the icons in the ribbon, but if a normal user larger screen it gets really hard to administer SharePoint and breaks the usability completely. There is a much quicker and saver ways to create a flexible master page where only certain CSS properties needs to be changed to get any fixed width design as well as centered design with border to the left and right.[Read more]

Article
2 comments

Enhance rich text editor using CSS – Part 1

This is the first post in a series about enhancing the rich text editor. The rich text editor in SharePoint 2010 has changed a lot and with some creativity it can be changed and enhanced for a lot of use cases. This first article provides information of a simple addition of a link to the content. It also shows how effects like hover can be handled in the rich text editor. No JavaScript is involved only pure Css. [Read more]

Article
0 comment

A little story about web design and what designer should know about IE9

So this blog post is the result of a funny story happened today. Since the last couple of weeks I daily check out awwwards and css design awards both sites present all the latest and best web designs in the web. Today the site of the day was deep time by Jamie Brightmore (@jaybee). The site is a really great user interface and shows the possibilities in current web design. Deep Time is an interactive info graphic built for the modern web and iPad. It offers a visual way to explore the various stages of the Earth’s history using a 12 hour clock analogy.

I liked the design and so I published it to Facebook. A couple of minutes later I was messaged by a friend that the web site won’t open in IE9. I was not really amused because awwwards and css design awards nominated web sites normally work in all mayor and latest version of browser. I wrote a comment about the deep time web site at awwwards and twittered Jaime Brightmore that I don’t like when site were nominated that don’t support all latest browser versions.

Jaime replied that he have tested it in IE9 and the animation there was quite slow and svg wasn’t loaded correct. The problem Jaime had is one that many people have and especially when they are not using windows every day. It is also easy to solve.

Jaime as a web designer and developer use a make and made the testing in a VmWare and used IE9, but not the 32-bit Version he installed and tested it in 64 bit. The 64 Bit Version is not intended to be used to browse the web it is for development purpose the same way it behaves like with Microsoft Office. The intention behind the 64 Bit Versions is to allow developer all around the world to upgrade their add-ons and plugins to 64 Bit.

In Windows the 64 Bit Version of Internet Explorer 9 is not intended to be used for normal web surfing. Eric Law from Microsoft has a Q&A for IE9 64 bit vs. 32 bit which is worth reading. The 32 Bit Version and the 64 Bit Version are both installed on Windows but the 64 Bit version is hidden to normal users with reason.

At the end I told Jaime that I wanted to give it a try on IE9 and test his web site. He sent me a link because he blocked IE Browsers completely because of the poor performance and different false look. The result was that all worked the same way as it worked in Google Chrome or Safari. Not one pixel was different in IE compared to other browsers and the performance was really amazing. All was tested with the 32 bit version of the Microsoft Browser and at the end he removed the blocking of IE9 and changed it to IE8 which somehow makes sense.

Before you develop a new web project consider the following things that you should know:

First of all for testing only use the 32 Bit Version of Internet Explorer. By pressing the F12 key the developer tools will be shown and the Browser Version can be configured to IE9, IE8 and IE7. That switch will render the site natively in the older versions and the tests matches one to one with the older versions.

Change Browser Version to IE7 and IE8

Change Browser Version to IE7 and IE8

The new developer tools are really handy and let fire bug to look old, but still cannot compete to the Safari Developer tools what I like most.

I think Microsoft has done a great job on the new version of Internet Explorer. Internet Explorer is much better than its reputation.

Article
15 comments

Use @font-face in Rich Text Editor of SharePoint 2010

In modern web design many sites use web fonts. Nearly since the beginning of the Internet there were always intentions to bring desktop fonts to the web. Nowadays the support for web typography in modern browser is in really big. Netscape introduced the <font> Tag in 1995 as a first attempt to bring different fonts to the web. Internet Explorer 4 was the first browser as far as I know that allows font embedding back in 1997.

In general some really good articles about web typography can be found on http://www.alistapart.com/topics/design/web-fonts/ which is worth reading to deep dive into web typography.[Read more]

Article
21 comments

Round corner in top navigation

The navigation in SharePoint 2010 has slightly changed and will now be rendered a new way as a list. To use list elements instead of tables is a common practice in web development. The structure of the navigation and therefore the top navigation has some important elements and style sheet classes that allow you to theme the top navigation really easy.

The Basic

The top navigation is a list as mentioned before. Inside a list element is a hyperlink that contains a span element. The source for one element on the top navigation looks like this:

<li class="static">
    <a class="static menu-item" href="/Blank">
        <span class="additional-background">
            <span class="menu-item-text">Blank</span>
        </span>
    </a>
</li>

To get a rounded navigation the background will be attached in this example to the hyperlink and the additional-background class. To reset the navigation add the follow style to your stylesheet.

.s4-tn ul li.static,
.s4-tn ul li.static.selected,
.s4-tn ul li.static a.static,
.s4-tn ul li.static a.static.selected{
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    border: 0px;
    background-image: none;
}

This style removes all paddings, margins and anything else that is not needed.

The Background Image

For the background images is use CSS sprite. If you don’t know what this is you can find a really good article on “A list apart”. Basically I us only a single background image and move the background around using background-position property. So the background image is use looks like this:

The red area I will use as a navigation background. The yellow will be my hover effects and also mark the selected navigation element but I will tell you later more.

The navigation

In the previous step I removed all margins and padding, which is good because now all navigation elements have now all the same values and set to zero. To attach the background I first stretch the navigation elements back to the values I will use later for the navigation.

.s4-tn ul li.static a.static,
.s4-tn ul li.static a.static.selected{
    background-color: orange;
    padding-left: 10px;
    padding-bottom: 9px;
    margin-right: 5px;
    color: white;
}
.s4-tn ul li.static a.static .additional-background{
    background-color: maroon;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 6px;
    color: white;
}

These styles above will let the top navigation look like this:

The final Step

Now to get the background image on our navigation you just need to add the background-image property to our style sheet. To get the parts of sprite in the right position we need to add the background-position too. The style sheet look then like this:

.s4-tn ul li.static a.static,
.s4-tn ul li.static a.static.selected{
    background-image: url('/_layouts/navigationtest/navigation-bg.png');
    background-repeat: no-repeat;
    background-position: left -120px;
    padding-left: 10px;
    padding-bottom: 9px;
    margin-right: 5px;
    color: white;
}
.s4-tn ul li.static a.static .additional-background{
    background-image: url('/_layouts/navigationtest/navigation-bg.png');
    background-repeat: no-repeat;
    background-position: right 0px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 6px;
    color: white;
}

And now you have navigation with round corners then looks like this:

So this wasn’t rocket science so far and only a view line of style sheet mission can be accomplished. One thing left missing, so what about the hover? Even no problem but we need to move the background images. The style for that looks like this and hover is done.

.s4-tn ul li.static a.static:hover,
.s4-tn ul li.static.selected a.static.selected,
.s4-tn ul li.static.selected a.static.selected:hover{
    background-position: left -180px;
    color: black;
}
.s4-tn ul li.static a.static .additional-background:hover,
.s4-tn ul li.static.selected a.static.selected .additional-background{
    background-position: right -60px;
    color: black;
}

And so it should look then:

The style above also alters the style of the selected tab and the whole style adaption has only thirty two lines of pure css without any jquery or other code required.

Conclusion:

So in general Microsoft done a great job to get rid of the lame table based design to a completely more web designstandard way. Styling the navigation is one good example how easy some things have become in SharePoint 2010. The classes on the element are better structured and well attached to the elements. Simple hover effects even don’t need any scripting code at all.