JSON无限折叠菜单编写

2013-12-14 22:37 by 龙恩0707, 103 阅读, 1 评论, 收藏编辑

最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上左侧有分类是很常见的 或者说导航菜单有下拉效果也是很常见的,但是他们都是做死的 也就是页面上代码直接写死的 然后实现那种下拉效果 而今天我们是通过JSON格式来自动生成的,或者可以说 要做这种折叠菜单效果 只需要开发人员提供我们前端开发这种JSON格式或者我们前端可以定这样的格式也就ok了 其他的都可以直接引用这个代码进去。下面给大家来分享下我的JS代码!

下面我们来看看具体的效果如下:

下面我们来看看JSON个格式是个什么样的 格式如下:

var testMenu=[
{
"name": "一级菜单",
"submenu": [
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"url": ""
}
]
},
{
"name": "一级菜单",
"submenu": [
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"submenu": [
{
"name": "三级菜单",
"submenu": [
{
"name": "四级菜单",
"url": ""
}
]
},
{
"name": "三级菜单",
"url": ""
}
]
},
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"submenu": [
{
"name": "三级菜单",
"submenu": [
{
"name": "四级菜单",
"url": ""
},
{
"name": "四级菜单",
"submenu": [
{
"name": "五级菜单",
"url": ""
},
{
"name": "五级菜单",
"url": ""
}
]
}
]
},
{
"name": "三级菜单",
"url": ""
}
]
},
{
"name": "二级菜单",
"url": ""
}
]
},
{
"name": "一级菜单",
"submenu": [
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"url": ""
},
{
"name": "二级菜单",
"url": ""
}
]
}
];

只要这种JSON格式就ok了 且上面的参数名 name submenu url是叫这样的名字就可以了 ,然后直接可以在页面HTML如下:

<div class="wrap-menu"></div>

CSS代码如下:

 <style type="text/css">
.wrap-menu { overflow:auto; width:300px; background:#F6F6F6; font:12px/1.5 Tahoma,Arial,sans-serif}
.wrap-menu ul{ list-style:none; margin:0; padding:0;}
.wrap-menu ul li{ text-indent:3em; white-space:nowrap; }
.wrap-menu ul li h2{ cursor:pointer; height:100%; width:100%; margin:0 0 1px 0; font:12px/31px '宋体'; color:#fff; background:red;}
.wrap-menu ul li a{ display:block; outline:none; height:25px; line-height:25px; margin:1px 0; color:#1A385C; text-decoration:none;}
.wrap-menu ul li img{ margin-right:10px; margin-left:-17px; margin-top:9px; width:7px; height:7px; background:url(images/arrow.gif) no-repeat; border:none;}
.wrap-menu ul li img.unfold{ background-position:0 -9px;}
.wrap-menu ul li a:hover{ background-color:#ccc; background-image:none;}
</style>

css样式可以自己下 没有关系!

JS代码如下:

 

代码初始化方式如下:

$(function(){
new AccordionMenu({menuArrs:testMenu});
});

大家也可以自己定义上面的JSON格式 然后引用我的css JS 也可以实现自己想要的效果 如果css上有自己的风格 也可以改写css样式!切忌!JSON格式一定要和我上面的一样 且名字也要叫一样的 就ok!初始化 如上

new AccordionMenu({menuArrs:testMenu}); 其中testMenu 就是上面定义的JSON格式。

JSON无限折叠菜单demo下载

 
 

JSON无限折叠菜单的更多相关文章

  1. JSON无限折叠菜单编写

    最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...

  2. cocos2dx-lua使用UIListView制作二级折叠菜单

    折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...

  3. 基于react实现无限分级菜单

    在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起. 本文纯粹为了练习一下react,因此我会在react环境下实现这么 ...

  4. 滑动式折叠菜单 - Slashdot's Menu

    折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...

  5. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  6. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS三级折叠菜单特效 自动收缩其它级

    真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...

  8. 20151225jquery学习笔记---折叠菜单UI

    折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了.一. 使用 accordion使用 acco ...

  9. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

随机推荐

  1. java 服务治理办法

    在大规模服务化之前.应用可能仅仅是通过RMI或Hessian等工具.简单的暴露和引用远程服务,通过配置服务的URL地址进行调用.通过F5等硬件进行负载均衡. (1) 当服务越来越多时.服务URL配置管 ...

  2. 1005. 继续(3n+1)猜想 (25) (ZJUPAT 数学)

    主题链接:http://pat.zju.edu.cn/contests/pat-b-practise/1005 卡拉兹(Callatz)猜想已经在1001中给出了描写叙述.在这个题目里.情况略微有些复 ...

  3. LCS 小结

    转载链接:http://www.cnblogs.com/PJQOOO/p/3897745.html 第一步:先计算最长公共子序列的长度. 实现第一步: 设一个C[i][j]: 保存Xi与Yj的LCS的 ...

  4. View Component

    View Component 在之前的MVC中,我们经常需要类似一种小部件的功能,通常我们都是使用Partial View来实现,因为MVC中没有类似Web Forms中的WebControl的功能. ...

  5. linux_删除空文件(大小等于0的文件)的方法

    1: 查看 find . -name "*" -type f -size 0c 2:删除 find . -name "*" -type f -size 0c | ...

  6. 使用SAX解析XML文件

    SAX这是Simple API for XML缩写,它不是由引起W3C拟议标准正式.尽管如此,使用SAX很少几个,点儿全部的XML解析器都会支持它. 与DOM比較而言,SAX是一种轻量型的方法. 我们 ...

  7. SQL2005性能分析一些细节功能你是否有用到?

    原文:SQL2005性能分析一些细节功能你是否有用到? 我相信很多朋友对现在越来越大的数据量而感到苦恼,可是总要面对现实啊,包括本人在内的数据库菜鸟们在开发B/S程序时,往往只会关心自己的数据是否正确 ...

  8. 我的时间,GTD做主

    可能每一次总结的时候,我们都在努力的回顾,我这几天都干了什么,结果回顾半天得到的结果就是:我也不知道,仿佛什么都没有做似的.事实上不然,你已经做了好多事,但却始终有这样的感觉,有的时候都在自己发问:我 ...

  9. 对象javascript

    //对象 var lennon=Object(); lennon.name="John"; lennon.year=1940; lennon.living=false; conso ...

  10. ORACLE PL/SQL编程之八:把触发器说透

    原文:ORACLE PL/SQL编程之八:把触发器说透 ORACLE PL/SQL编程之八: 把触发器说透 大家一定要评论呀,感谢!光发表就花了我将近一个下午. 本篇主要内容如下: 8.1 触发器类型 ...