SharePoint : Top Area Navigation Drop Down Menu Control

This menu control works based on external JavaScript and CSS file. These files are sample only. Follow the following steps to install the web control into the page.

Step 1: Create Web Control (I know you know all these steps, but just adding bit…)

  • Open Visual

  • Create New Visual C# Web Control Library Project.

  • Name the project as AreaMenuControl

  • Rename the WebControlLibrary1.cs as MyAreamenuControl.cs

  • Copy and paste the code from the MyAreamenuContro.cs.txt file attached here in the MyAreamenuControl.cs file

  • Copy the AreaMenuControl.snk file attached here into project folder

  • Open the AssemblyInfo.cs file.

  • Specify the AssemblyKeyFile as “..\\..\\AreaMenuControl.snk”

  • Compile the project

Step 2: Install the web control into GAC

  • Goto Start->Administrative Tools->Microsoft .NET Framework 1.1 Configuration

  • Right click the “Assembly Cache” tree node and clik Add

  • Select the AreaMenuControl.dll and click Open

Step 3: Copy additional files into corresponding folders

  • Copy the menu.js and menu.css file into “C:\program files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033“ folder

  • Create a folder “img” in “C:\program files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033”

  • Copy lev0_bg1.gif, lev0_bg2.gif and lev1_arrow.gif into “C:\program files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE \LAYOUTS\1033\img” folder

Step 4: Insert the menu into aspx pages

  • Open aspx page where you want to insert the menu. (For example default.aspx pages in SPS, SPSTopic, SPSToc and all other files)

  • Copy and paste the following line at the top of the page

<%@ Register Tagprefix="AreaMenuControl" Namespace="AreaMenuControl" Assembly="AreaMenuControl, Version=, Culture=neutral, PublicKeyToken=5539eabbaefd0c86" %>

  • Copy and paste the following lines into the <head> tag

<script language="JavaScript" src="src="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/menu.js"></script>

<link rel="stylesheet" href="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/menu.css">

  • Copy and paste the following line where ever you want to insert menu

<AreaMenuControl:MyAreaMenuControl ID="MyAreaMenuControl1" runat="server"/>

For example if you want to place at the top of the default.aspx page then insert the following line after the first <table> tag in the body tag

<tr> <td colspan="3" width="100%" height="24" bgcolor="#2C5F93">

<AreaMenuControl:MyAreaMenuControl ID="MyAreaMenuControl1" runat="server"/>

</td> </tr>

Step 5: Web.config file settings.

  • Open the web.config file and add the following <safe control> entry

            <SafeControl Assembly="AreaMenuControl, Version=, Culture=neutral,PublicKeyToken=5539eabbaefd0c86" Namespace="AreaMenuControl" TypeName="*" />

Note :

All the code attached here is sample only and they have been provided as of is

I have modified the code slightly to arrange the areas as per its Order Use the MyAreaMenuControl_WithSortedOrder.Cs file instead of MyAreaMenucontrol.cs.