Creating custom fly out menu : SharePoint 2010

Many a times, we need to add navigational elements in the default sharepoint navigation to allow the users to browse to our custom site pages/application pages. One good place for this is the sharepoint 'Site Actions' menu.

We can add custom fly out menus in the 'Site Actions' menu to allow the users to browse to our pages.

In order to do this, we need to create a class inheriting from the 'Control' class in the 'System.Web.UI.Controls' namespace.

In this class, we override the method 'CreateChildControls' and make use of the classes 'SubMenuTemplate' and 'MenuItemTemplate'in the 'Microsoft.SharePoint.WebControls' namespace to create menu items.

The code for the control is as follows:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web.UI.WebControls;

using System.Web.UI;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

namespace Blog_Test_Project.CustomControls

{

    public class CustomMenuControl:Control

    {

        string SubMenuIconUrl = @"/_layouts/images/menunewitem.gif";

        string MenuIconUrl = @"/_layouts/images/menunewitem.gif";

        string AppPage1Url = @"/_layouts/Blog_Test_Project/PostOnFacebook.aspx";

        string AppPage2Url = @"/_layouts/Blog_Test_Project/TypeAheadSearch.aspx";

        protected override void CreateChildControls()

        {

            SPWeb site = SPContext.Current.Web;

            // create fly out menu

            SubMenuTemplate smt = new SubMenuTemplate();

            smt.ID = "CustomSubMenu";

            smt.Text = "Test Project Menu Control";

            smt.Description = "Test Custom fly out menu";

            smt.MenuGroupId = 1;

            smt.Sequence = 1;

            smt.ImageUrl = site.Url + SubMenuIconUrl;

            // create fly out menu command 1

            MenuItemTemplate mit1 = new MenuItemTemplate();

            mit1.ID = "CustomFlyoutMenu1";

            mit1.Text = "Post on your facebook wall";

            mit1.Description = "This page is used to post on your facebook wall from a sharepoint page.";

            mit1.Sequence = 1;

            mit1.ClientOnClickNavigateUrl = site.Url + AppPage1Url;

            mit1.ImageUrl = site.Url + MenuIconUrl;

            // create fly out menu command 2

            MenuItemTemplate mit2 = new MenuItemTemplate();

            mit2.ID = "CustomFlyoutMenu2";

            mit2.Text = "Check out type ahead search in a document library";

            mit2.Description = "This page is used to do type ahead search in a document library.";

            mit2.Sequence = 2;

            mit2.ClientOnClickNavigateUrl = site.Url + AppPage2Url;

            mit2.ImageUrl = site.Url + MenuIconUrl;

            // add menu commands to Controls collection of fly out menu

            smt.Controls.Add(mit1);

            smt.Controls.Add(mit2);

            // add fly out menu to Controls collection of of menu control

            this.Controls.Add(smt);

        }

    }

}

Once this is done , we add an item of type 'Empty Element' in our sharepoint project:

and then we add the following 'CustomAction' element in the elements.xml file:

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <CustomAction Id="TestCustomMenuControl"

GroupId="SiteActions"

Location="Microsoft.SharePoint.StandardMenu"

Sequence="1"

ControlAssembly="$SharePoint.Project.AssemblyFullName$"

ControlClass="Blog_Test_Project.CustomControls.CustomMenuControl"

Title="Custom Menu Control Test"

Description="Custom Menu Control Test"

/> 

</Elements>


After adding the element, we also need to add a safecontrol entry for this class since it is a custom control.We can do this by clicking on the Element in Visual Studio, clicking on 'SafeControls' in its property sheet and clicking on 'Add' to create a new entry:

Once this is done, we can deploy the solution by clicking on 'Deploy' for the sharepoint project in Visual Studio.



Once the solution is deployed, we can see the results by going to the site and opening up the 'Site Actions' menu.

Hope this helps!!