Home > Developer > Web Develop

JS Control JSON Build menu--homemade menu (i)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This document resolves the following issues: 1. The JSON file is written in 2.jquery.getjson () using 3.jquery.each () using one of the 4.jQuery DOM operations:. Append () One of the methods of using 5.jQuery:. Children () Use one of the 6.jQuery traversal methods:. Siblings () uses one of the 7.jQuery binding event handlers:. On () using 8.jQuery sliding effects:. Slidetoggle (),. Slideup (),. Slidedown () the use of

Final effect:

1.navtab.html

1 <!DOCTYPE HTML>2 <HTML>3 4     <Head>5         <MetaCharSet= "UTF-8">6         <title>Generate menus with JQ and JSON</title>7         <Linktype= "Text/css"rel= "stylesheet"href= "Css/navtab.css" />8         <Scriptsrc= "Js/jquery_3.3.1_jquery.min.js"></Script>9         <Scriptsrc= "Js/navtab.js"></Script> Ten     </Head> One  A     <Body> -  -         <DivID= "Nav_box"> the             <ulID= "Nav-mainbox"> -                 <Liclass= "Nav_head"> -                     <spanclass= "Shead"><imgsrc= "Img/nav/home.png"/></span> -                     <ahref="#">Home</a> +                     <spanclass= "Sfoot"><imgsrc=""/></span> -                 </Li> +             </ul> A         </Div> at  -     </Body> -  - </HTML>

2.nav.json

[{"NavId": 1, "Navtitle": "Level Menu 1", "Navparentid": 0}, {"NavId": 2, "Navtitle": "Level Menu 2", "Navparentid": 0}, {"NavId": 3, " Navtitle ":" Level Menu 1 sub 1 "," Navparentid ": 1}, {" NavId ": 4," Navtitle ":" Level Menu 1 Child 2 "," Navparentid ": 1}, {" NavId ": 5," Navtitle ":" First level menu 3 "," Navparentid ": 0}, {" NavId ": 6," Navtitle ":" Level Menu 2 sub 1 "," Navparentid ": 2}, {" NavId ": 7," Navtitle ":" Level Menu 3 Child 1 "," Navparentid ": 5}, {" NavId ": 8," Navtitle ":" First level Menu 2 sub 2 "," Navparentid ": 2}, {" NavId ": 9," Navtitle ":" Level Menu 4 "," Navparentid ": 0 }, {"NavId": Ten, "Navtitle": "Level Menu 4 sub 1", "Navparentid": 9}

3.navtab.js

1$(function() {2$.getjson ("Json/nav.json",function(data) {3         //1.getJSON method Gets the JSON file data, data for the JSON stored object group4          for(vari = 0; i < data.length; i++) {5             //2. Iterate through each object in the data array with a length of data.length6$.each (Data[i],function(Key, Val) {7                 //3. Traverse the key-value pair for each data object, traverse 3, cause the JSON file has 3 key-value pairs8                 //The key represents the property name, and Val represents the corresponding property value9                 if(Data[i][key] = = 0) {Ten                     //4. Determine if the data object has a menu with a parent menu ID of 0 One                     //0 is a first-level menu, generates an LI tag, displays the menu item name data[i]["Navtitle"] A                     //add Li at the same class as data[i]["NavId"] -$ ("#nav-mainbox"). Append ("<li class=" "+ data[i][" navId "] +" ' ><span class= ' shead ' ></span><a>" + data[i]["Navtitle"] + "</a><span class= ' Sfoot ' > </span><ul></ul></li> "); -  the                     //7. When the page is first loaded, only the submenu of the first level menu is displayed -                     //Other sub-menu items hidden -$ ("LI.1"). Children ("ul")). Slidedown (); -$ ("LI.1"). Siblings (). Children ("UL"). Slideup (); +  -                     //6. Binding a point-and-click event for a first-level menu +                     //One-level menu item to slide Show or hide submenu items A                     //Also, the current menu is displayed, others are hidden at$ ("." + data[i]["navId"]). On ("click",function() { -$( This). Children ("UL"). Slidetoggle (); -$( This). Siblings (). Children ("UL"). Slideup (); -                     }) -  -                 } in  -                 if(Data[i][key] = = i + 1) { to                     //5. Judging non-primary menu items +                     //find the Li tag as its submenu item based on the parent menu ID of the object -$ ("." + data[i]["Navparentid"]). Find ("ul"). Append ("<li class=" + data[i]["navId"] + "' ><a href= '" + data[i][" Navurl "] +" > "+ data[i][" navtitle "+" </a></li> "); the                 } *             }); $ Panax Notoginseng         } -     }) the});

4.navtab.css

1 Body{2 margin:0;3 padding:0;4 font-family:"Microsoft Jas Black";5 font-size:16px;6}7 8 ul,9 Li{Ten List-style:None; One} A  - A, - A:hover, the a:active, - A:link{ - text-decoration:None; - Color:#3d3d3d; +} -  + #nav_box{ A width:220px; at Height:100%; -      -} -  - #nav_box #nav-mainbox{ - padding:0; in  -} to  + #nav-mainbox Li{ - Background-color:#f2f2f2; the Color:#333; * font-size:14px; $ position:relative;Panax Notoginseng Line-height:44px; - cursor:Pointer; the Border-bottom:1px solid #dedede; + Border-right:1px solid #dedede; A      the} + #nav-mainbox li:hover{ - Background-color:#ADADAD; $} $ . Shead{ - position:relative; - width:40px; the Height:40px; - Top:10px;Wuyi padding:10px; the  -} Wu . Sfoot{ - position:relative; About width:40px; $ Height:40px; - Margin-left:70px; -      -} A  + #nav-mainbox Li ul{ the padding:0; -} $  the #nav-mainbox Li ul li{ the position:relative; the Padding-left:70px; the Background-color: White; - Border-bottom:1px solid #dedede; in Border-right:1px solid #dedede; the} the #nav-mainbox Li ul li:hover{ About Background-color:#ccc; the}

Note: The file name of the icon in front of the first-level menu is the Navid value in its corresponding JSON file

BODY END!!!!!

JS Control JSON Build menu--homemade menu (i)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
apc menu menu php electron menu udf menu menu developer axios menu bumbles menu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More