Client Object to Create Dynamic menus in SharePoint

Question

I have a requirement where I need to create menus dynamically through List with out farm or sandbox solutions. And the given url for the menu should render with in the SharePoint master page .Can any one help me how can I do this?

Answer 1

What I understand is that you will have a list with two columns to show the menu in master page.

After getting all the list items you could append them in ul as li to form a menu as shown in code below.

List Name : MenuList

Columns:

• Title - Single Line Text

• HyperLink - Single Line Text

Use JavaScript Client Object Model to retrieve the items from this list and create a menu from it.

Code:

var siteUrl = '/sites/MySiteCollection';

function retrieveListItems() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('MenuList');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {

    var lis= '<ul>';

    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        lis+= '<li><a href='+oListItem.get_item('HyperLink') +'/>' + oListItem.get_item('Title') +'<li/>'
    }

    lis+='</ul>';

    $('#menudiv').append(lis); // a div to which you will append the lis. 
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Now Skeleton for your menu has been created. You need to apply css to render according to your design.

Please let me know if you have any questions. Happy Coding !