Ajax+xml Implementation Dynamic Drop-down navigation menu

XML file for product classification

ID is self id,pid to parent category ID
<?xml version= "1.0" encoding= "UTF-8"?>
<Proot>
<item id= "1" pid= "0" >1321 series </Item>
<item id= "2" pid= "1" >43223 series </Item>
</Proot>

JS Code copy content to clipboard

Code:

var root;
Firefox does not support the selectnodes approach, and finding this code on the Web solves the problem. Compatible with IE and Firefox.
Create SelectNodes method
if (Document.implementation.hasFeature ("XPath", "3.0"))
{
Prototying the XmlDocument
XMLDocument.prototype.selectNodes = function (cxpathstring, xnode)
{
if (!xnode) {xnode = this;}
var onsresolver = this.creatensresolver (this.documentelement)
var aitems = this.evaluate (cxpathstring, XNode, Onsresolver,
Xpathresult.ordered_node_snapshot_type, NULL)
var aresult = [];
for (var i = 0; i < aitems.snapshotlength; i++)
{
Aresult[i] = Aitems.snapshotitem (i);
}
return aresult;
}
Prototying the Element
Element.prototype.selectNodes = function (cxpathstring)
{
if (this.ownerDocument.selectNodes)
{
Return This.ownerDocument.selectNodes (cxpathstring, this);
}
Else{throw "for XML Elements only";}
}
}
function Createxmlhttprequest () {
if (window. ActiveXObject) {
Oxmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
Oxmlhttp = new XMLHttpRequest ();
}
}
function Createxmldom ()
{
Createxmlhttprequest ();
Oxmlhttp.open ("Get", "XML Path", false);
Oxmlhttp.send (NULL);
root = oXmlHttp.responseXML.documentElement;
}
Createxmldom ()
function Funcreatepullmenu (Passpid,childid)
{

var currentitems = root.selectnodes ("//proot/item[@pid =" + Passpid + "]");
var iitems = currentitems.length;
var k=0;
if (Iitems > 0)
{

var pdiv = document.createelement ("DIV");
Pdiv.id= "PIV" + passpid;
Pdiv.classname = "Piv" + childid;
Pdiv.name = "Piv" + passpid;
if (passpid>0)
{
Pdiv.style.display= "None";
document.getElementById ("div" + passpid). appendchild (Pdiv);
}
Else
{
document.getElementById ("Odiv"). AppendChild (Pdiv);
}
for (var i = 0; i < Iitems; i++)
{
var _id = Currentitems[i].attributes[0].value;
var newchild = document.createelement ("DIV");
Newchild.id= "div" + _id;
Newchild.classname = "div" + childid;
Newchild.name = "div" + _id;

var _v;
if (Checkpullmenu (_id))
{
_1= _id
_v = "<a href=" Javascript:showsubmenu ("+ _1 +") ' > ' +currentitems[i].firstchild.data + "</a>";
}
Else
{
_v = "<a href= ' productlist.aspx?type=" + _id + "' >" + currentitems[i].firstchild.data + "</a>";
}
Newchild.innerhtml=_v;


document.getElementById ("Piv" + passpid). appendchild (newchild);
if (Checkpullmenu (_id))
{
Funcreatepullmenu (_id,childid+1)
}
}
}
}
Detect if there are subordinates
function Checkpullmenu (passpid)
{

var currentitems = root.selectnodes ("//proot/item[@pid =" + Passpid + "]");
var iitems = currentitems.length;
if (Iitems > 0)
{
return true;
}
Else
{
return false;
}
}
Show hidden Layers
function Showsubmenu (SID)
{
var Whichel = document.getElementById ("Piv" +sid);
if (WhichEl.style.display = "None")
{
whichel.style.display= "Block";
}
Else
{
Whichel.style.display= "None";
}
}

How to: Add "<div id=" Odiv "></div>" to the Web page. Join in body

You can add CSS definitions to your code. To achieve better results.