Create a custom navigation menu for a Sharepoint website

I believe many people want to replace the top navigation menu built into the SharePoint website with their desired style. Because the website navigation of SharePoint 2007/2010 is basically based on the standard ASP. NET sitemap model, you can create a custom navigation menu as long as you have some knowledge about ASP. NET sitemap.

Before getting started, let's look for a cool Menu Control on the Internet. In the following example, I will use the jquery control smooth navigation menu to render the top navigation menu of the SharePoint website. Download all the .js0000.css0000.gif files related to the smooth navigation menucontrol, and we will put them into the SharePoint project.

Open Visual Studio 2010, create a Sharepoint 2010 Project (my favorite project template is "Blank SharePoint project"), and add a ing folder to the project, to store all the files required by the smooth navigation menu control. I chose to create an smoothnavmenu sub-folder in the layouts folder to store these files, as shown in:

Next, create a custom navigation menu. In fact, there are many ways to create custom navigation menus. For example, you can create a custom navigation menu by using a custom control. In this example, we use a jquery plug-in to implement interface rendering (. to create a custom navigation menu, it seems to be a better choice.

In Visual Studio 2010, add a user control to the project and name it smoothnavmenu. ascx.

Then open the new smoothnavmenu. ascx user control and fill it with content.

Most of the content in smoothnavmenu. ascx is referenced in. CSS and. js according to the requirements of the smooth navigation menucontrol. The javascript code from row 20th to line 34th initializes the smooth navigation menu after the page is loaded. For more information, see the website of smooth navigation menu.

From rows 16th to 18th, we place a literal control into a <div> element. In the background code of the user control, the system queries the navigation structure on the top of the current website, generates corresponding HTML elements, and fills them in with the literal control. <Div> the element Declaration is also required by smooth navigation menu. The smooth navigation menu renders the navigation menu based on the HTML elements output by the literal control.

Then open the background code file of the user control smoothnavmenu. ascx, smoothnavmenu. ascx. CS. In the background code of the user control, we need to obtain the navigation structure at the top of the current website and generate HTML elements according to the structure. The code for obtaining the navigation structure at the top of the website is:

In the page_load event, we call this method to obtain the navigation structure at the top of the website, and then generate the HTML elements required for the smooth navigation menu through the buildmenucontent method (the specific implementation code of this method is omitted, then, fill these HTML elements in the user control interface using the text property of the literal control.

Now, we have created the custom navigation menu. However, if you want to use it on a website, you also need to put it on the master page of the website and delete the default navigation menu control on the master page. To do this, you can use SharePoint designer to open the website, find the master page, and then perform the work. Alternatively, you can create a new master page in the project to use the custom navigation menu we created on the new master page, and then use the new master page for the website.

Change the name of the Visual Studio Guest File to v4_smoothnavmenu.master, and replace the content with the content of the default v4.master master page used by the SharePoint 2010 website (directly find v4.master in SharePoint designer and open it, select all HTML content, copy it, open v4_smoothnavmenu.master in vs2010, and paste it ).

Because we need to put the v4_smoothnavmenu.master file into the master page style Library of the website, open elements. XML, edit the content, modify the URL attribute of the <module> tag to "_ catalogs/masterpage", and modify the type attribute of the <File> tag to "ghostableinlibrary ":

Now let's modify the master page file v4_smoothnavmenu.master, open it from Visual Studio 2010, first add a <% @ register %> label in the header area, register the previously created user control on the page:

Search for a contentplaceholder control with the ID "placeholderhorizontalnav" on the master page and delete the aspmenu control (the control originally used to display the top navigation menu on the master page ), then add the user control we created to this place:

The master page is successfully modified! We hope that the website administrator can enable or disable a new master page by activating or disabling a feature. Therefore, in Visual Studio 2010, open the features folder, rename the feature1 created automatically by vs2010 to smoothnavmenufeature, and double-click it to add more friendly instructions for this feature on the feature designer interface:

Right-click smoothnavmenufeature and select "add event receiver". In the generated code file, remove the comments of featureactivated and featuredeactivating methods and add the following code. Simply put, the purpose of these codes is to automatically apply a new master page to the website when the Administrator activates this function, and restore the original master page of the website when the Administrator disables the function.

Success! Compile, deploy, activate the "smooth navigation menu" function, and return to the home page of the website. You can see that the navigation menu on the top of the website has been replaced with the custom navigation menu we created.

On the "website settings-top navigation bar" Management page, you can add new nodes to the top navigation bar. However, if the SharePoint website is not a publishing website, you cannot directly create a level-2 menu through the built-in "website settings-top navigation bar" Management page. Well, in fact, here is a tip: Simply enter "http: // website URL/_ layouts/areanavigationsettings" in the address bar. aspx to open the navigation settings page that can only be used by published websites. The global navigation is the top navigation of the website, here, you can directly add a level-2 menu to Global Navigation:

 

Then, the following figure shows the effect. The menu is rendered by the custom navigation menu we created above:

Although this article is based on SharePoint 2010, most of the content can work on the SharePoint 2007 website (certainly not supported by tools such as Visual Studio 2010 ). In addition, permissions and access groups in the navigation are not shown in this example.