Creating a flyout menu in SharePoint 2010

In this post we are going to see how we can create a fly out menu and add it to the site actions menu. Thing to note is I have shown this for site actions menu. It can simply be added to any other place like edit control block just by changing the appropriate text inside element file like location attribute.

First we need to create a class which inherits from control class -System.Web.UI.Controls.

Then we need to override the createchilecontrols method.

You can do this simply by adding class to the existing project and then inherit from control and then override the method. Here is a code that I have written. 

What we are doing is first we are instantiating a class SubMenuTemplate. That means this will be added as the main menu item that will appear under Site Actions.

Then we define MenuItemTemplate that will be the sub menu to the parent which is SubMenuTemplate in our case.

public class FlyoutMenu : Control

    {

        protected override void CreateChildControls()

        {

            SPWeb site = SPContext.Current.Web;

            SubMenuTemplate SubMenuTmplt = new SubMenuTemplate();

            SubMenuTmplt.ID = "CustomSubMenu";

            SubMenuTmplt.Text = "SPKings Menu Control";

            SubMenuTmplt.Description = "Custom Flyout Menu";

            SubMenuTmplt.MenuGroupId = 1;

            SubMenuTmplt.Sequence = 1;

            MenuItemTemplate MenuItemTmp1 = new MenuItemTemplate();

            MenuItemTmp1.ID = "FlyoutMenu1";

            MenuItemTmp1.Text = "SPKings Menu Item 1";

            MenuItemTmp1.Description = "This is customized fly out menu item 1";

            MenuItemTmp1.Sequence = 1;

            MenuItemTmp1.ClientOnClickNavigateUrl = site.Url ;

         

            // create fly out menu command 2

            MenuItemTemplate MenuItemTmp2 = new MenuItemTemplate();

            MenuItemTmp2.ID = "FlyoutMenu2";

            MenuItemTmp2.Text = "SPKings Menu Item 2";

            MenuItemTmp2.Description = "This is customized fly out menu item 1";

            MenuItemTmp2.Sequence = 2;

            MenuItemTmp2.ClientOnClickNavigateUrl = site.Url ;

           

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

            SubMenuTmplt.Controls.Add(MenuItemTmp1);

            SubMenuTmplt.Controls.Add(MenuItemTmp2);

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

            this.Controls.Add(SubMenuTmplt);

        }

Make a note that the ClientOnClickNavigateURL is only available to the MenuItemTemplates as they are the last node to be added and can be clicked to perform the actual action. As an example I have used site.URL. In real scenario you can have a web part page or application page set up where you would want user to go.

I have not set the images for the menu items. you can also set that as well by using ImgURL property of both SubMenuTemplate and MenuItemTemplate object.

Once we are done with writing this code, we need to make sure that we add this to the safe controls entry to the project.

Deploy after completing all above step and activate the feature. You should be good to go and should see the new menu available under the Site Action. If you want to change the position of menu being displayed, then just change the sequence property.