Skip to main content

JQuery Quick Menu

Building a menu using JQuery is too simple.  Here the script reads from an XML file to build the menu items.

Sample xml

<Root>
  <Menu Text="Home" URL="" ToolTip="Home" ID="m1" >
    <SubMenu Text="About us" URL="" ToolTip="About us"></SubMenu>
    <SubMenu Text="Contact us" URL="" ToolTip="About us"></SubMenu>
    <SubMenu Text="Careers" URL="" ToolTip="About us"></SubMenu>
  </Menu>
  <Menu Text="Company" URL="" ToolTip="Home" ID="m2" >
    <SubMenu Text="Clients" URL="" ToolTip="About us"></SubMenu>
    <SubMenu Text="Management" URL="" ToolTip="About us"></SubMenu>
  </Menu>
</Root>

JQuery
$(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "Menu.xml",
                dataType: 'xml',
                success: function MenuBuilder(xml) {
                    $(xml).find("Menu").each(function () {
                        $("#Menu").append('<div class="menu" id="' + $(this).attr('ID') + '"><a href=' + $(this).attr('URL') + ' Tooltip=' + $(this).attr('ToolTip') + '>' + $(this).attr('Text') + '</a></div>');
                        var id = $(this).attr('ID');
                        var smid = "SM" + id;
                        $("#" + id).append('<div class="submenu" id="' + smid + '"></div>');
                        $(this).find("SubMenu").each(function () {
                            $("#" + smid).append('<a href=' + $(this).attr('URL') + '>' + $(this).attr('Text') + '</a><br />');
                        });
                        $("#" + smid).hide();
                        $("#" + id).hover(function () { $("#" + smid).show(); }, function () { $("#" + smid).hide(); });
                       
                   });
                }
            });
        });

Comments

Post a Comment

Popular posts from this blog

Enable Session State in SharePoint 2010

You would have noticed that after installing SharePoint 2010 and deploying your custom solutions, code which is dependent on Session variables would not work as expected. That is because the Session state is not enabled by default. You just need to run this cmdlet in Powershell and boom Session starts working. Enable-SPSessionStateService –DefaultProvision A new service Application by name "SharePoint Server ASP.NET Session State Service" should be available. The web.config will have this additional entry under configuration/system.webserver/modules Also dont forget to change the attribute "enableSessionState" to true in the page Element.
Post a Comment
Read more