How to create a custom navigation menu for a SharePoint site

I believe many people want to replace the top navigation menu built into the SharePoint site with the style they want. Because SharePoint 2007/2010 's Web site navigation is basically based on the standard asp.net sitemap model, you can create a custom navigation menu as long as you have some knowledge of the ASP.net sitemap.

Before we start, let's look for a cool menu control from the Internet. In the following example, I would choose to use the jquery control smooth navigation menu to render the top navigation menu of a SharePoint site. Download all of the. js,. css,. gif files associated with the smooth navigation menu control, and we'll put them all in a SharePoint project.

Open Visual Studio 2010, create a SharePoint 2010 project (my favorite project template is "Blank SharePoint Project"), add a mapped folder to the project to store the smooth navigation All the files required by the menu control. I chose to create a Smoothnavmenu subfolder in the Layouts folder to hold these files, as shown in the following illustration:

Next you start creating a custom navigation menu. In fact, there are a number of ways we can use to create custom navigation menus. For example, we can choose to create a custom navigation menu in the way that a custom control is made. Since in this example we are using a jquery plug-in to implement the interface rendering, it seems a better choice to create a custom navigation menu in the form of a user control (. ascx).

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

Then open the new Smoothnavmenu.ascx user control and populate it with content.