CSS+JS实现结构化无限级导航菜单列表(直接调用)
今天跟大家分享一下如何通过HTML的结构化方式实现无限级导航菜单列表的功能!首先让大家看一下两个实例演示——
[无限级竖式菜单列表] [无限级横式菜单列表]
这里详细分析的并非JS的源码部分(封装好的JS源码是从国外网站摘录下来的),而是前台直接调用的关键部分,主要有三点——
1、直接调用的JS函数
ddlevelsmenu.setup(导航菜单ID, 列表方式);
显然易见,我们要预先给导航菜单设定一个ID,这里没固定是DIV还是UL等其它HTML标签。而“列表方式”的参数值有两个——topbar:竖式列表显示,sidebar:横式列表显示。
2、HTML的结构
这里包含的结构主要有主菜单(导航)、下级菜单两种HTML结构和rel标签属性。
(1)其中主菜单的结构是用基本的UL、LI(li里面有超链接内容)结构,形如:
<ul id=’NavBar’>其中,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可视为不使用图标方式)。有兴趣的朋友可以根据自个需要进行调整。
最后把完整的实例源码打包跟大家分享一下。
【下载页面】