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.