MenuBuilder jQuery Plugin

This is my first jQuery Plugin.It allows users to build a Menu like structure using 'ul' , 'li' & 'a'.
The menu can be created from a jSON Object.

This supports unlimited number of submenus.you can use this if you have dynamic menus for each page.you can provide the jSON Object in each subpages and load the menu accordingly.

you can combine this with any jQuery Menu Plugin ( I use jQueryUI ).

to get a Menu structure like this

• Menu A
• Menu Aa
• Menu B
• Menu Ba
• Menu Bb
• Menu Bb1
• Menu Bb11
• Menu Bb12
• Menu Bb2
• Menu C
• Menu Ca
• Menu Cb

 the jSON object have to be like below

var jSONObj = {
            "menu": [
                {
                    "name": "Menu A",
                    "url": "~/Demo/page1",
                    "menu": [
                        {
                            "name": "Menu Aa",
                            "url": "~/Demo/page2",
                        }]
                },
                {
                    "name": "Menu B",
                    "url": "",
                    "menu": [
                        {
                            "name": "Menu Ba",
                            "url": "~/Demo/page3",
                        },
                        {
                            "name": "Menu Bb",
                            "url": "~/Demo/page4",
                            "menu": [
                                        {
                                            "name": "Menu Bb1",
                                            "url": "~/Demo/page5",
                                            "menu": [
                                                        {
                                                            "name": "Menu Bb11",
                                                            "url": "~/Demo/page6",
                                                        },
                                                        {
                                                            "name": "Menu Bb12",
                                                            "url": "~/Demo/page7",

                                                        }
                                                            ]
                                        },
                                        {
                                            "name": "Menu Bb2",
                                            "url": "~/Demo/page6",
                                            
                                        }
                                    ]
                        }
                    ]
                },
                {
                    "name": "Menu C",
                    "url": "~/Demo/page9",
                    "menu": [
                                        {
                                            "name": "Menu Ca",
                                            "url": "~/Demo/page10",
                                        },
                                        {
                                            "name": "Menu Cb",
                                            "url": "~/Demo/page11",
                                        }
                    ]
                }
            ]
        }; 

Then simply call the plugin function in the document.ready function

        $(document).ready(function () {
            $('#dvmenu').MenuBuilder(jSONObj);

        });

where  'dvmenu' is the id of the div where the menu is generated


jQuery Plugin : 

(function ($) {

    $.fn.MenuBuilder = function (jSONObject) {
        this.append(populateSubMenuItems(jSONObject));
        return this;
    };

    function populateSubMenuItems(jsonObject) {
        var items = jsonObject.menu;
        var ul = $('<ul/>');
        $.each(items, function (n, elem) {
            if (elem.menu == null) {
                $(ul).append("<li><a href='"+elem.url+"' >" + elem.name + "</a></li>");
            } else {
                var subul = populateSubMenuItems(elem);
                var subli = $('<li/>');
                $(subli).append("<a href='" + elem.url + "' >" + elem.name + "</a>");
                $(subli).append(subul);
                $(ul).append(subli);
            }
        });
        return ul;
    }

}(jQuery));

Save the plugin as jquery.menubuilder.js 



dont forget to include the jQuery file in the page :)

works with almost all versions of jQuery.

the example is shown with jQueryUI Menu

sample : http://jsfiddle.net/urEka/6/