最近比较清闲，自己做了个JavaScript NodeTree，网上类似的东西其实挺多的，功能也比这个全，我做这个纯粹为了练练手。 图标可以自定义（16X16），菜单项完全是JSON类型定义的，方便修改。 界面： 使用方法： 1、将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用。 2、引用JQuery框架。 3、修改NodeTree-JSON.js中的NodeTreeMenu菜单项，以下是简单说明。 复制代码 代码如下: var NodeTreeMenu = [ //id:节点ID，pId：父节点Id，没有父节点则为0，name:显示名称，img:显示图标，open:只有父节点存在此属性，子节点默认是否展开，file:只有子节点由此属性，点击后打开的页面 { id: 1, pId: 0, name: "父节点一", img: "CSS/Images/001.png", open: true }, { id: 101, pId: 1, name: "子节点一", img: "CSS/Images/002.png", file: "http://www.cnblogs.com/nnzfly/" }//注意最后一行数据末尾一定不能加逗号！否则IE下报错！ ] 4、在要显示NodeTree的地方添加如下代码： 复制代码 代码如下: <ul id="NodeTree-JSON"> </ul> 5、在页面中添加如下代码： 复制代码 代码如下: <script type="text/javascript"> $(function () { NodeTree("mainFrame"); }); </script>或者是（二者任选其一）： <script type="text/javascript"> window.onload=function (){ NodeTree("mainFrame"); } </script> NodeTree("mainFrame") 中，mainFrame是目标frame的name，比如说导航栏在左边的frame里，右边显示的frame的name=“mainFrame”。 实在不理解看看demo.htm的代码，就明白了。 附上源代码，感兴趣的可以看看～ http://dl.vmall.com/c0b7wda1ps 喜欢请点一下推荐，你的支持是我最大的动力！

　　推荐阅读

　　jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)

一、jQuery.roll 插件使用说明 jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为： 复制代码 代码如下: /* * @module jQuery roll * @param: contentCls 内容容器class>>>详细阅读

本文标题：JavaScript NodeTree导航栏(菜单项JSON类型/自制)

地址：http://www.17bianji.com/kaifa2/JS/22381.html

 1/2    1