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

Source: Internet
Author: User

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)

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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