Simple implementation of the jquery unlimited drop-down menu code _ jquery-js tutorial

This article mainly introduces the simple implementation code of jquery's unlimited drop-down menu. If you need it, you can refer to it and hope to help you. In this example, we use json data, combined ul and li to achieve
:




1. Prepare json data:

The Code is as follows:

Var menuData = [
{Id: 0, pid:-1, name: "order product", url: "", children :[
{Id: 1, pid: 0, name: "computer accessories", url: "http://www.jb51.net", children :[
{Id: 20, pid: 1, name: "cpu", url: "http://www.jb51.net", children :[
{Id: 30, pid: 20, name: "Intel", url: "http://www.jb51.net", children :[
{Id: 3000, pid: 30, name: "Intel 01", url :""},
{Id: 3001, pid: 30, name: "Intel 02", url :""},
{Id: 3002, pid: 30, name: "Intel 03", url :""},
{Id: 3003, pid: 30, name: "Intel 04", url :""},
{Id: 3004, pid: 30, name: "Intel 05", url :""},
{Id: 3005, pid: 30, name: "Intel 06", url :""},
{Id: 3006, pid: 30, name: "Intel 07", url :""},
{Id: 3007, pid: 30, name: "Intel 08", url :""},
{Id: 3008, pid: 30, name: "Intel 09", url :""}
]},
{Id: 31, pid: 20, name: "AMD", url: "http://www.jb51.net", children :[
{Id: 3100, pid: 31, name: "AMD 01", url :""},
{Id: 3101, pid: 31, name: "AMD 02", url :""},
{Id: 3102, pid: 31, name: "AMD 03", url :""},
{Id: 3103, pid: 31, name: "AMD 04", url :""},
{Id: 3104, pid: 31, name: "AMD 05", url :""},
{Id: 3105, pid: 31, name: "AMD 06", url :""},
{Id: 3106, pid: 31, name: "AMD 07", url :""},
{Id: 3107, pid: 31, name: "AMD 08", url :""},
{Id: 3108, pid: 31, name: "AMD 09", url :""}
]}
]},
{Id: 21, pid: 1, name: "Memory", url: "http://www.jb51.net "},
{Id: 22, pid: 1, name: "Hard Disk", url: "http://www.jb51.net "},
{Id: 23, pid: 1, name: "motherboard", url: "http://www.jb51.net "},
{Id: 24, pid: 1, name: "video card", url: "http://www.jb51.net "},
{Id: 25, pid: 1, name: "Monitor", url: "http://www.jb51.net "},
{Id: 26, pid: 1, name: "inbox", url: "http://www.jb51.net "},
{Id: 27, pid: 1, name: "Power Supply Bin", url: "http://www.jb51.net "},
{Id: 28, pid: 1, name: "mouse (wired)", url: "http://www.jb51.net "},
{Id: 29, pid: 1, name: "mouse (Wireless)", url: "http://www.jb51.net "}
], Url: "http://www.jb51.net "},
{Id: 101, pid: 0, name: "monitoring equipment", children :[
{Id: 102, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 103, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 104, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 112, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 113, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 114, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 115, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 116, pid: 101, name: "camera", url: "http://www.jb51.net "},
{Id: 117, pid: 101, name: "camera", url: "http://www.jb51.net "}
], Url: "http://www.jb51.net "},
{Id: 201, pid: 0, name: "digital product", children :[
{Id: 202, pid: 201, name: "camera", url: "http://www.jb51.net "}
], Url: "http://www.jb51.net "},
{Id: 301, pid: 0, name: "network product", children :[
{Id: 302, pid: 301, name: "camera", url: "http://www.jb51.net "}
], Url: "http://www.jb51.net "},
{Id: 401, pid: 0, name: "printed consumables", children :[
{Id: 402, pid: 401, name: "Printer", url: "http://www.jb51.net "},
{Id: 403, pid: 401, name: "ink", url: "http://www.jb51.net "},
{Id: 404, pid: 401, name: "paper", url: "http://www.jb51.net "},
{Id: 405, pid: 401, name: "camera", url: "http://www.jb51.net "},
{Id: 406, pid: 401, name: "camera", url: "http://www.jb51.net "},
{Id: 407, pid: 401, name: "camera", url: "http://www.jb51.net "},
{Id: 408, pid: 401, name: "camera", url: "http://www.jb51.net "}
], Url: http://www.jb51.net "}
]},
{Id: 1000, pid:-1, name: "My orders", url: "", children :[
{Id: 1001, pid: 1000, name: "expired orders", url :""},
{Id: 1001, pid: 1000, name: "paid order", url :""}
]},
{Id: 2000, pid:-1, name: "company info", url: "", children :[
{Id: 2001, pid: 2000, name: "Latest news", url :""},
{Id: 2002, pid: 2000, name: "company address", url :""}
]}
];

2.html code:

The Code is as follows:

3. parse json data (plugin-menu.js file): Just learned to write jquery plug-in, write is still chaotic, make it look

The Code is as follows:

(Function ($ ){
$. Fn. extend ({
Menu: function (options ){
Var defaults = {
Data: [],
UlId: "baseMenu"
};
Var options = $. extend (defaults, options );
// Start splicing ul, li
$. Each (options. data, function (I, v ){
Var li = $ ("

");
Var _ a = $ ("" + options. data [I]. name + "");
_ A. attr ("href", options. data [I]. url)
. AppendTo (li );

_ Each (options. data [I], li );
Li. appendTo ($ ("#" + options. ulId ));
});
// Add an event to li
$ (This). find ("li"). hover (function (){
Var id = $ (this). attr ("id ");
$ (This). find ("ul [name = '" + id + "']"). show ();
}, Function (){
Var id = $ (this). attr ("id ");
$ (This). find ("ul [name = '" + id + "']"). hide ();
});
}
});
}) (JQuery );

Because it supports an infinite number of levels, recursive methods are certainly used:

The Code is as follows:

Function _ each (data, li ){
If (data = undefined | data. children = undefined ){
Return false;
}
Var ul = $ ("

");

$. Each (data. children, function (I, v ){
Var _ li = $ ("

");
Var _ a = $ ("" + data. children [I]. name + "");
_ A. attr ("href", data. children [I]. url)
. Attr ("target", "_ blank ")
. AppendTo (_ li );

If (data. children [I]. children! = Undefined ){
_ Each (data. children [I], _ li );
}
_ Li. appendTo (ul );
});
Ul. appendTo (li );
}

4. Call the plug-in:

The Code is as follows:

$ (Function (){
$ ("# Menu"). menu ({data: menuData, ulId: "baseMenu "});
});

Finally, css style:

The Code is as follows:

Ul, li {list-style: none; padding: 0px; margin: 0px ;}
# Menu * {line-height: 30px ;}
# Menu a {text-decoration: none ;}
# Menu ul {text-align: left ;}
# Menu> ul> li {text-align: center; width: 80px; float: left ;}
# Menu> ul> li> a {color: #000 ;}
# Menu> ul> li: hover {background: # F0F0F0 ;}
# Menu> ul> li ul {display: none; width: 150px; position: absolute; background: # c1cd94; box-shadow: 2px 2px 2px #000; -webkit-box-shadow: 2px 2px 2px #000;
-Moz-box-shadow: 2px 2px 2px #123 ;}
# Menu> ul> li> ul li {padding-left: 5px; position: relative ;}
# Menu> ul> li> ul li> a {color: #000 ;}
# Menu> ul> li> ul li: hover {background: # d3dbb3 ;}
# Menu> ul> li ul {left: 150px; top: 0px ;}