CSS+JS实现结构化无限级导航菜单列表(直接调用)

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2013-03-11 12:28:55
  • 点击:27372
[0分]
无限级导航菜单 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" class="mattblackmenu"> 
  <li><a href="http://www.56gee.com">网站首页</a></li> 
  <li><a href="http://www.56gee.com/kzxs/" rel="Menu2">酷站欣赏</a></li> 
  <li><a href="http://www.56gee.com/sjxs/" rel="Menu3">设计欣赏</a></li> 
  <li><a href="http://www.56gee.com/sjjl/" rel="Menu4">设计交流</a></li> 
  <li><a href="http://www.56gee.com/sjwz/" rel="Menu5">设计网址</a></li> 
  <li><a href="http://www.56gee.com/sjsc/" rel="Menu6">设计素材</a></li> 
</ul>

其中,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可视为不使用图标方式)。有兴趣的朋友可以根据自个需要进行调整。

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

下载
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华