相信不少人都希望把SharePoint網(wǎng)站內(nèi)置的那個(gè)頂部導(dǎo)航菜單，換成自己希望的樣式。由于SharePoint 2007/2010的網(wǎng)站導(dǎo)航基本上基于標(biāo)準(zhǔn)的ASP.NET SiteMap模型，所以只要你對(duì)ASP.NET SiteMap有一些了解，就能創(chuàng)建一個(gè)自定義的導(dǎo)航菜單。

在開始之前，讓我們先從網(wǎng)上隨便找一個(gè)樣子比較cool的菜單控件。在下面的示例中，我會(huì)選擇使用Smooth Navigation Menu這個(gè)jQuery控件，來渲染出SharePoint網(wǎng)站的頂部導(dǎo)航菜單。將Smooth Navigation Menu控件相關(guān)的.js、.css、.gif文件統(tǒng)統(tǒng)下載下來，我們將把它們都放進(jìn)SharePoint項(xiàng)目中。

打開Visual Studio 2010，創(chuàng)建一個(gè)SharePoint 2010項(xiàng)目（我最喜歡的項(xiàng)目模板是“空白SharePoint項(xiàng)目”），在項(xiàng)目中添加一個(gè)映射文件夾，來存放Smooth Navigation Menu控件所需的所有文件。我選擇在Layouts文件夾中創(chuàng)建一個(gè)SmoothNavMenu子文件夾來存放這些文件，如下圖所示：

接下來開始創(chuàng)建自定義導(dǎo)航菜單。實(shí)際上，我們有很多方法可以用來創(chuàng)建自定義導(dǎo)航菜單。例如，我們可以選擇以自定義控件的方式，來創(chuàng)建一個(gè)自定義導(dǎo)航菜單。由于在這個(gè)示例中，我們使用的是一個(gè)jQuery插件來實(shí)現(xiàn)界面渲染，所以選擇以用戶控件（.ascx）的方式來創(chuàng)建自定義導(dǎo)航菜單，似乎是一個(gè)更好的選擇。

在Visual Studio 2010中，向項(xiàng)目中添加一個(gè)用戶控件，為其命名為SmoothNavMenu.ascx。

然后打開新建的這個(gè)SmoothNavMenu.ascx用戶控件，為其填充內(nèi)容。

SmoothNavMenu.ascx中大部分的內(nèi)容，都是按照Smooth Navigation Menu控件的要求，添加所需的.css和.js引用。從第20行到第34行的JavaScript代碼，作用是在頁面載入之后，將Smooth Navigation Menu初始化。具體用法請(qǐng)參考Smooth Navigation Menu的網(wǎng)站。

第16行到第18行，我們將一個(gè)Literal控件放到一個(gè)<div>元素中。在用戶控件的后臺(tái)代碼中，會(huì)查詢當(dāng)前網(wǎng)站的頂部導(dǎo)航結(jié)構(gòu)，并生成相應(yīng)的html元素，然后通過這個(gè)Literal控件填充進(jìn)用戶控件。<div>元素的聲明同樣是Smooth Navigation Menu的要求。Smooth Navigation Menu會(huì)根據(jù)Literal控件所輸出的html元素，渲染出導(dǎo)航菜單。

接著打開用戶控件SmoothNavMenu.ascx的后臺(tái)代碼文件，SmoothNavMenu.ascx.cs。在用戶控件的后臺(tái)代碼中，我們需要獲得當(dāng)前網(wǎng)站的頂部導(dǎo)航結(jié)構(gòu)，并根據(jù)其結(jié)構(gòu)生成html元素。獲得網(wǎng)站頂部導(dǎo)航結(jié)構(gòu)的代碼是：

然后在Page_Load事件中，我們調(diào)用此方法來得到網(wǎng)站頂部導(dǎo)航結(jié)構(gòu)，然后通過BuildMenuContent方法（此方法的具體實(shí)現(xiàn)代碼略）生成Smooth Navigation Menu所需的html元素，然后將這些html元素通過Literal控件的Text屬性填充到用戶控件界面上。

好了，到這里，我們已經(jīng)把自定義的導(dǎo)航菜單創(chuàng)建好了。但是，如果你想要在網(wǎng)站上使用它，還需要把它放到網(wǎng)站的母版頁上面去，同時(shí)刪除母版頁上那個(gè)默認(rèn)的導(dǎo)航菜單控件。要做到這些，你可以使用SharePoint Designer，打開網(wǎng)站，找到母版頁，然后蠻干?；蛘呤褂酶玫姆椒?#xff0c;在項(xiàng)目中創(chuàng)建一個(gè)新的母版頁，讓新母版頁上使用我們創(chuàng)建的自定義導(dǎo)航菜單，然后使網(wǎng)站使用新的母版頁。

在Visual Studio 2010中，向項(xiàng)目中添加一個(gè)“模塊”，把VS2010自動(dòng)創(chuàng)建的那個(gè)Sample.txt文件改名為v4_SmoothNavMenu.master，然后把內(nèi)容替換為SharePoint 2010網(wǎng)站默認(rèn)使用的v4.master母版頁的內(nèi)容（直接在SharePoint Designer中找到v4.master，打開它，全選所有html內(nèi)容，復(fù)制，然后到VS2010中打開v4_SmoothNavMenu.master，粘貼）。

由于我們需要把v4_SmoothNavMenu.master文件放進(jìn)網(wǎng)站的母版頁樣式庫里面，所以打開Elements.xml，編輯其內(nèi)容，修改<Module>標(biāo)簽的Url屬性為“_catalogs/masterpage”，修改<File>標(biāo)簽的Type屬性為“GhostableInLibrary”：

現(xiàn)在我們來修改v4_SmoothNavMenu.master這個(gè)母版頁文件，從Visual Studio 2010中打開它，首先在頭部區(qū)域，添加一個(gè)<%@ Register %>標(biāo)簽，將之前創(chuàng)建的那個(gè)用戶控件注冊(cè)到頁面上：

然后搜索母版頁中一個(gè)ID為“PlaceHolderHorizontalNav”的ContentPlaceHolder控件，將里面的那個(gè)AspMenu控件刪除掉（它就是母版頁上原本用來顯示頂部導(dǎo)航菜單的控件），然后將我們創(chuàng)建的用戶控件添加到這個(gè)地方：

母版頁就成功改好了！我們希望網(wǎng)站的管理員可以通過激活或停用一個(gè)Feature，就相應(yīng)的啟用或停用這個(gè)新建的母版頁。所以，在Visual Studio 2010中，打開Features文件夾，將VS2010自動(dòng)創(chuàng)建的Feature1改名為SmoothNavMenuFeature，雙擊它，在Feature設(shè)計(jì)器界面上為這個(gè)Feature添加更友好的說明信息：

在SmoothNavMenuFeature上點(diǎn)擊鼠標(biāo)右鍵，選擇“添加事件接收器”，然后在生成的代碼文件中，取消FeatureActivated和FeatureDeactivating方法的注釋，并添加如下代碼。簡(jiǎn)單來說，這些代碼的作用是在管理員激活這個(gè)功能時(shí)，自動(dòng)為網(wǎng)站應(yīng)用新的母版頁，并在管理員停用功能時(shí)，恢復(fù)網(wǎng)站原有的母版頁。

大功告成！編譯，部署，激活“Smooth Navigation Menu 導(dǎo)航菜單”功能，回到網(wǎng)站首頁，應(yīng)該就能看到網(wǎng)站的頂部導(dǎo)航菜單已經(jīng)被替換成了我們創(chuàng)建的這個(gè)自定義導(dǎo)航菜單。

通過“網(wǎng)站設(shè)置 - 頂部鏈接欄”管理頁面，你可以為頂部導(dǎo)航添加新的節(jié)點(diǎn)。但是，如果這個(gè)SharePoint網(wǎng)站不是一個(gè)發(fā)布網(wǎng)站，通過內(nèi)置的“網(wǎng)站設(shè)置 - 頂部鏈接欄”管理頁面是沒法直接創(chuàng)建二級(jí)菜單的。嗯，實(shí)際上，這里有一個(gè)小技巧，通過直接在地址欄輸入“http://網(wǎng)站url/_layouts/AreaNavigationSettings.aspx”，就能打開原本只有發(fā)布網(wǎng)站才能使用的導(dǎo)航設(shè)置頁面，其中的“全局導(dǎo)航”就是網(wǎng)站的頂部導(dǎo)航，在這里是可以直接向“全局導(dǎo)航”添加二級(jí)菜單的：

?

然后，下面就是你可以看到的效果，這個(gè)菜單就是通過我們?cè)谏厦嫠鶆?chuàng)建的自定義導(dǎo)航菜單所渲染出來的：

雖然這篇文章是以SharePoint 2010為基礎(chǔ)進(jìn)行演示，但其中絕大部分內(nèi)容是可以工作在SharePoint 2007網(wǎng)站中的（當(dāng)然肯定沒有Visual Studio 2010如此之好的工具支持）。另外，對(duì)于導(dǎo)航中的權(quán)限、訪問群組，并沒有在這個(gè)示例中有所體現(xiàn)。

總結(jié)

以上是生活随笔為你收集整理的为SharePoint网站创建自定义导航菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。