今天跟大家分享一下如何通过HTML的结构化方式实现无限级导航菜单列表的功能！首先让大家看一下两个实例演示——

[无限级竖式菜单列表] [无限级横式菜单列表]

这里详细分析的并非JS的源码部分（封装好的JS源码是从国外网站摘录下来的），而是前台直接调用的关键部分，主要有三点——

1、直接调用的JS函数

ddlevelsmenu.setup(导航菜单ID, 列表方式);

显然易见，我们要预先给导航菜单设定一个ID，这里没固定是DIV还是UL等其它HTML标签。而“列表方式”的参数值有两个——topbar：竖式列表显示，sidebar：横式列表显示。

2、HTML的结构

这里包含的结构主要有主菜单（导航）、下级菜单两种HTML结构和rel标签属性。

（1）其中主菜单的结构是用基本的UL、LI（li里面有超链接内容）结构，形如：

其中，rel的属性值在这相当于id的作用——没有rel表示没有下级菜单，否则表示有；而其值跟下级菜单的id是一一对应的。比如：rel=’Menu1’表示对象id=’Menu1’是它的下级菜单内容，如此类推。

（2）下级菜单结构同样由ul、li来组成，不同的是没有了rel属性。如果想继续增加下级菜单，在该菜单的后面（li标签外）再添加一个ul、li的基本机构……就类似这样，一层一层地往下无限添加下级菜单……

3、CSS样式设置

至于菜单的样式问题，其实跟上述的JS和HTML布局是完全无关的，设计者可以跟平常一样任意设定。

从以上分析可知，无论是竖式还是横式的菜单列表，它们的HTML结构是完全一样的，只要设定主函数的属性值即可灵活实现。另外，该实例中式包含了分级菜单的指示图标。这个是可以改变的，具体可以打开ddlevelsfiles/ddlevelsmenu.js文件，找到arrowpointers的设置，里面包含了图片的相对位置和长宽大小（如果长宽设置为0可视为不使用图标方式）。有兴趣的朋友可以根据自个需要进行调整。

最后把完整的实例源码打包跟大家分享一下。

【下载页面】