JSON unlimited folding menu compiling example

JSON unlimited folding menu compiling example

This article mainly introduces examples of JSON unlimited folding menu writing. If you need it, please refer to it.

I recently read an article about the infinite JSON folding menu. I feel that it is well written and I have also studied the code, so we also made a demo using our own encoding method. In fact, this menu item is very common on our website or project navigation menu items, in particular, classification on the left of E-commerce networks is very common, or drop-down effects on navigation menus are also very common, but they are all dead, that is, the code on the page is directly written to the dead, and then the pull-down effect is achieved. Today we are automatically generated in JSON format, you can also say that to do this kind of folding menu effect, you only need the developer to provide the JSON format for front-end development, or you can set the format for the front-end, so that you can directly reference the code. I will share with you my JS Code below!

 

Let's take a look at the JSON format as follows:

 

The Code is as follows:

Var testMenu = [

{

"Name": "Level 1 menu ",

"Submenu ":[

{

"Name": "Level 2 menu ",

"Url ":""

},

{

"Name": "Level 2 menu ",

"Url ":""

}

]

},

{

"Name": "Level 1 menu ",

"Submenu ":[

{

"Name": "Level 2 menu ",

"Url ":""

},

{

"Name": "Level 2 menu ",

"Submenu ":[

{

"Name": "Level 3 menu ",

"Submenu ":[

{

"Name": "Level 4 menu ",

"Url ":""

}

]

},

{

"Name": "Level 3 menu ",

"Url ":""

}

]

},

{

"Name": "Level 2 menu ",

"Url ":""

},

{

"Name": "Level 2 menu ",

"Submenu ":[

{

"Name": "Level 3 menu ",

"Submenu ":[

{

"Name": "Level 4 menu ",

"Url ":""

},

{

"Name": "Level 4 menu ",

"Submenu ":[

{

"Name": "Level 5 menu ",

"Url ":""

},

{

"Name": "Level 5 menu ",

"Url ":""

}

]

}

]

},

{

"Name": "Level 3 menu ",

"Url ":""

}

]

},

{

"Name": "Level 2 menu ",

"Url ":""

}

]

},

{

"Name": "Level 1 menu ",

"Submenu ":[

{

"Name": "Level 2 menu ",

"Url ":""

},

{

"Name": "Level 2 menu ",

"Url ":""

},

{

"Name": "Level 2 menu ",

"Url ":""

}

]

}

];

 

As long as the JSON format is OK, and the above parameter name submenu url is called such a name, then you can directly go to the page in HTML as follows:

 

 

Copy the Code as follows:

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

 

The CSS code is as follows:

 

The 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 ' '; 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 do not matter!

 

The JS Code is as follows:

 

The Code is as follows:

/**

* Unlimited JSON folding menu

* @ Constructor {AccordionMenu}

* @ Param {options} object

* @ Date 2013-12-13

* @ Author tugenhua

* @ Email 879083421@qq.com

*/

 

Function AccordionMenu (options ){

This. config = {

ContainerCls: '. wrap-menu', // outer container

MenuArrs: '', // data transmitted in JSON

Type: 'click', // The default value is click or mouseover.

RenderCallBack: null, // callback after rendering the html Structure

ClickItemCallBack: null // call back each time you click an item

};

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 the html Structure

$ (_ Config. containerCls). each (function (index, item ){

 

Self. _ renderHTML (item );

 

// Process 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>

 

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 level Indentation

Self. _ levelIndent (ulhtml );

},

/**

* Create a sub-menu

* @ Param {array} sub-menu

* @ Param {lihtml} li item

*/

_ 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 (' ');

Callee (item. submenu, subLi );

}

$ (SubUl). append (subLi );

});

$ (Lihtml). append (subUl );

},

/**

* Process hierarchical indentation

*/

_ LevelIndent: function (ulList ){

Var self = this,

_ Config = self. config,

_ Cache = self. cache,

Callee = arguments. callee;

 

Var initTextIndent = 2,

Ev = 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 ();

},

/**

* Bind events

*/

_ 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 ('low'). end (). children ('img'). toggleClass ('unfold ');

}

 

$ (This). parent ('lil'). 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:

 

 

The Code is as follows:

$ (Function (){

New AccordionMenu ({menuArrs: testMenu });

});

 

You can also define the above JSON format and reference my css JS to achieve the desired effect. If you have your own style on css, you can also rewrite the css style! Don't worry! The JSON format must be the same as above and the name must be the same! Initialize as above

 

New AccordionMenu ({menuArrs: testMenu}); testMenu is the JSON format defined above.