1、首先我们来看一下效果图，横向下拉菜单。
2、接下来我们看一下w3c的菜单，和小编的菜单对比一下。两者内容相同，但w3c的菜单不支持下拉，缺乏动态效果，显得死板。选中效果也不明显。不过他的网页是框架式结构，菜单相对来说还是导向性很明确的。而且将信息分成几大块，每大块有分为几小块，这样的排版很整齐，也简洁。
3、代码分析，这是代码中唯一的一点js，作用是更改下面菜单的class，配合样式表（CSS）可以达到动态效果，比如下拉菜单的下拉功能、选中显示，都是这样做到的。可以说，整个菜单主要部分都是DIV+CSS。而不是JS
4、这是所有的css部分，通过css的继承属性，来让代码达到利用率最大化。通过子类覆盖父类的属性，来让总属性利用率增加，但缺点是代码结构模糊，对新手来说难度较大。
5、接下来是HTML，这里给出两段结构，也就是两列下拉菜单，其他的格式是一样的，就不在全部截图了。链接我涂掉了，百度经验不让带链接。菜单链接你做的肯定跟我不一样，看链接也没用。如图，那个id：nav十分重要，不能丢！！它相当于整个div容器，虽然标签不是div，但思想一样。
6、最后再来看一下效果图吧！
在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式：1.一种为使用eval()()函数。2. 使用Function对象来进行返回解析。用eval函数来解析，并且使用jquery的each方法来遍历用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器 返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。 这里首先给出JSON字符串集，字符串集如下：12345678910111213141516171819202122232425 代码如下:var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'}, {name:'6105',value:'渭南市'}, {name:'6106',value:'延安市'}, {name:'6107',value:'汉中市'}, {name:'6108',value:'榆林市'}, {name:'6109',value:'安康市'}, {name:'6110',value:'商洛市'} ]}" var dataObj=eval("("+data+")")//转换为json对象alert(dataObj.root.length+"个对象")for(var i=0i<dataObj.root.lengthi++){var obj=dataObj.root[i] alert(obj.Name+"--"+obj.value)}Cytoscape.js 为了性能，在个性化样式定制上，没有给出开箱即用的法子。
例如，想实现下面这样的效果图，G6有动画支持，而 Cytoscape.js 却没有。
如果确定要用Cytoscape.js ，该怎么实现这个效果呢？
当然，最直接的办法是用canvas动画来处理，但我暂时没精力研究canvas。
我想到了之前用过一个Canvas绘图库，里面提供了飞线图，正是我想要的效果。
能不能把二者结合呢？当然可以， 用Cytoscape.js 绘制静态节点，用DataV绘制动画 不就可以了嘛。
顺着这个思路，以很小的学习成本就实现了开头的那个demo。
灵活的组合使用工具，也是一门技术。
