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