JSON infinite folding menu authoring example
- 2020-03-30 00:55:27
- OfStack
Recently read an article about JSON infinite folding menu written feel good, is also studied under the code, so the coding way also made a demo actually such menu items in our website or project navigation menu item the very common one kind of effect, especially in some e-commerce and classification is very common, or on the left navigation menu has a drop-down effect also is very common, but they are all do die, that is, on the page code to write directly to death and then realize the effect of the drop-down and today we are automatically generated by the JSON format, Or you could say that to do this folding menu effect you just need the developer to give you the front end to develop this JSON format or you can give you the front end to develop this JSON format and everything else can just refer to this code. Let's share my JS code!
Here's how it works:
< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201312/20131216161932341.gif" >
Here's a look at what the JSON format looks like:
var testMenu=[
{
"name": " Level 1 menu ",
"submenu": [
{
"name": " The secondary menu ",
"url": ""
},
{
"name": " The secondary menu ",
"url": ""
}
]
},
{
"name": " Level 1 menu ",
"submenu": [
{
"name": " The secondary menu ",
"url": ""
},
{
"name": " The secondary menu ",
"submenu": [
{
"name": " Level 3 menu ",
"submenu": [
{
"name": " Level 4 menu ",
"url": ""
}
]
},
{
"name": " Level 3 menu ",
"url": ""
}
]
},
{
"name": " The secondary menu ",
"url": ""
},
{
"name": " The secondary menu ",
"submenu": [
{
"name": " Level 3 menu ",
"submenu": [
{
"name": " Level 4 menu ",
"url": ""
},
{
"name": " Level 4 menu ",
"submenu": [
{
"name": " Five menu ",
"url": ""
},
{
"name": " Five menu ",
"url": ""
}
]
}
]
},
{
"name": " Level 3 menu ",
"url": ""
}
]
},
{
"name": " The secondary menu ",
"url": ""
}
]
},
{
"name": " Level 1 menu ",
"submenu": [
{
"name": " The secondary menu ",
"url": ""
},
{
"name": " The secondary menu ",
"url": ""
},
{
"name": " The secondary menu ",
"url": ""
}
]
}
];
As long as this JSON format is ok and the above parameter name name submenu url is called like this, and then directly in the page HTML as follows:
<div class="wrap-menu"></div>
The CSS code is as follows:
<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 ' Song typeface '; 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 styles can be their own next no matter!
JS code is as follows:
function AccordionMenu(options) {
this.config = {
containerCls : '.wrap-menu', //The outer container
menuArrs : '', // JSON data passed in
type : 'click', //Click by default can also be mouseover
renderCallBack : null, //Callback after rendering HTML structure
clickItemCallBack : null //Callbacks every time an item is clicked
};
this.cache = {
};
this.init(options);
}
AccordionMenu.prototype = {
constructor: AccordionMenu,
init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
//Render HTML structure
$(_config.containerCls).each(function(index,item){
self._renderHTML(item);
//Handle click events
self._bindEnv(item);
});
},
_renderHTML: function(container){
var self = this,
_config = self.config,
_cache = self.cache;
var ulhtml = $('<ul></ul>');
$(_config.menuArrs).each(function(index,item){
var lihtml = $('<li><h2>'+item.name+'</h2></li>');
if(item.submenu && item.submenu.length > 0) {
self._createSubMenu(item.submenu,lihtml);
}
$(ulhtml).append(lihtml);
});
$(container).append(ulhtml);
_config.renderCallBack && $.isFunction(_config.renderCallBack) && _config.renderCallBack();
//Process hierarchy indentation
self._levelIndent(ulhtml);
},
_createSubMenu: function(submenu,lihtml){
var self = this,
_config = self.config,
_cache = self.cache;
var subUl = $('<ul></ul>'),
callee = arguments.callee,
subLi;
$(submenu).each(function(index,item){
var url = item.url || 'javascript:void(0)';
subLi = $('<li><a href="'+url+'">'+item.name+'</a></li>');
if(item.submenu && item.submenu.length > 0) {
$(subLi).children('a').prepend('<img src="images/blank.gif" alt=""/>');
callee(item.submenu, subLi);
}
$(subUl).append(subLi);
});
$(lihtml).append(subUl);
},
_levelIndent: function(ulList){
var self = this,
_config = self.config,
_cache = self.cache,
callee = arguments.callee;
var initTextIndent = 2,
lev = 1,
$oUl = $(ulList);
while($oUl.find('ul').length > 0){
initTextIndent = parseInt(initTextIndent,10) + 2 + 'em';
$oUl.children().children('ul').addClass('lev-' + lev)
.children('li').css('text-indent', initTextIndent);
$oUl = $oUl.children().children('ul');
lev++;
}
$(ulList).find('ul').hide();
$(ulList).find('ul:first').show();
},
_bindEnv: function(container) {
var self = this,
_config = self.config;
$('h2,a',container).unbind(_config.type);
$('h2,a',container).bind(_config.type,function(e){
if($(this).siblings('ul').length > 0) {
$(this).siblings('ul').slideToggle('slow').end().children('img').toggleClass('unfold');
}
$(this).parent('li').siblings().find('ul').hide()
.end().find('img.unfold').removeClass('unfold');
_config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this));
});
}
};
The code initialization method is as follows:
$(function(){
new AccordionMenu({menuArrs:testMenu});
});
You can also define the above JSON format and then reference my CSS JS can also achieve the effect you want if you have their own style on the CSS can also rewrite the CSS style! Avoid by all means! JSON format must be the same as the above and the name must be called the same ok! Initialize as above
New AccordionMenu ({menuArrs: testMenu}); TestMenu is the JSON format defined above.
(link: http://xiazai.jb51.net/201312/yuanma/JSdjzdcd (jb51.net). Rar)