SharePoint : Top Area Navigation Drop Down Menu Control

  • Article

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 Studio.net

  • 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=1.0.0.0, 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=1.0.0.0, 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.

MyAreaMenuControl.zip