全新开源的DNN导航菜单——DNN-Menu

DNN-Menu仅支持5.x系列的DNN版本.

实例：


一、安装：
首先我们到http://dnnmenu.codeplex.com下载安装包（31.5KB），之后像安装普通模块一样安装。

安装完成后接下来研究如何在皮肤中使用此Menu Provider：
首先打开需要应用此导航菜单的皮肤（.ascx文件），这里我们使用默认的MinimalEntropy皮肤，用WebMatrix打开DNN站点，在文件视图中进入以下目录：Portals/_default/Skins/MinimalEntropy，打开index.ascx用户控件，在文档开始部分注册Menu控件：

<%@ Register TagPrefix="AZ" TagName="Menu" Src="~/DesktopModules/AZ.DNNMenu/Menu.ascx" %> 然后将原来使用的默认导航<dnn:nav..../>替换为：

<az:menu id="azNAV" runat="server" template="Default"> 这里我们可以看到默认的模板是”Default“，修改完毕后我们刷新一遍首页就可以看到使用AZMenu的效果了，当然现在因为我们没有修改任何样式，看起来并不美观，我们来看一下默认的效果：


二、结构分析
安装完成后在模块管理页面是找不到AZ.DNNMenu模块的,我们到站点目录下查看一下它的目录结构：

这里可以看到AZ.DNNMenu将模板放在单个文件夹中，以下是各个文件的作用：
Menu.ascx :导航主用户控件
Templates(模板)->Default(默认模板)

■img 文件夹用于存放导航所需要的图片
■Default.html 用于指定导航菜单的模板
■default.js 用于执行jQuery语句
■hoverIntent.js 鼠标经过延迟事件执行插件
■superfish.css 导航菜单样式表(这里默认选用的是superfish的导航效果)
■superfish.js superfish jQuery导航插件
分析完目录结构后我们可以看到AZ.DNNMenu是将多个jQuery制作的导航插件集成到DNN中,通过定义Default.html默认模板的方式来修改导航结构,这种方式无需编写一行代码，下面我们分析一下怎样配置模板

三、配置
从这里我们将看到AZ.DNNMenu的独特之处,它使用独创的模板引擎,利用模板标记来创建模板,下面我们看一下都有哪些标记：

■[Level] [/Level]：[Level]定义菜单层开始，使用[/Level]来层结束，如果想建立多级子菜单就要用[Level]嵌套的方式，[Level]属于是强制使用标记
■[Element] [/Element]：[Element]定义在每个菜单中被重复的元素例如 li/ol等,[Element]属于强制使用标记
■[First] [/First]：[First]用于定义导航每个[Level]层列表中的第一个元素，可以在[Element]中单独使用，也可以设置多个
■[Last] [/Last]：[Last]定义导航每层的最后一个元素，可以在[Element]中单独使用，也可以设置多个
■[Selected] [/Selected]：定义被选定的当前活动标签，可以在[Element]中单独使用，也可以设置多个
■[HasChilds][/HasChilds]：[HasChilds]定义当前层是否含有子菜单
■[Unique][/Unique]：菜单唯一标识，如果你想对某一个菜单或子菜单单独设立外观及样式，通过设置[Unique]可以提供唯一Css选择符
■[#FullUrl]：指定是否解析完全Url地址
■[#TabName]：页面名称，如果使用Ealo多语言模块此处可提供多语言支持
■[#TabInfoPropertyName]：此标记可以引用绝大多数DNN 页面设置中所设置的属性例如icon等。