Question

I have an xml as like below

above is an example of my xml file. Now my requirement is to read the xml file and build a menu using jquery.

can some one please help me

Answer 1

You can try this

XML

<?xml version="1.0" encoding="utf-8" ?>
    <MenuRoot>
        <Menu id="home" text="Home" url="home.aspx"></Menu>
        <Menu id="projects" text="Projects" url="projects.aspx">
            <SubMenu id="sub1" text="Sub One" url="subone.aspx"></SubMenu>
            <SubMenu id="sub2" text="Sub Two" url="subtwo.aspx"></SubMenu>
        </Menu>
    </MenuRoot>

HTML

<div id="menu_wrapper"></div>

JS

$(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "jquery_xml.xml",
            dataType: "xml",
            success: function(xml){
                var ul_main=$("<ul />");
                $(xml).find("Menu").each(function(){
                    if($(this).children().length)
                    {
                        var ulSub=$("<ul />");
                        $(this).children().each(function(){
                            ulSub.append("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
                        });
                        var li=$("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
                        ul_main.append(li.append(ulSub))
                    }
                    else ul_main.append("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
                });
                $("#menu_wrapper").append(ul_main);
            }
        });
});

Output

You just need to style your menu using css.