Top Navigation

Suppose you want to create Top navigation , you can use below code.
 We will have list , where we will keep our all data , so it will be dynamic. we can set the order also. We will have selflook for parent child relation.

 SP.SOD.executeFunc('sp.js', 'SP.ClientContext', setTopNavigation);

 function setTopNavigation() {
var leaderclientContext = new SP.ClientContext.get_current();
 var leadermenuList = leaderclientContext.get_web().get_lists().getByTitle('Top Navigation Menu');
 var leadercamlQuery = new SP.CamlQuery();
 leadercamlQuery.set_viewXml('1');
 leadercollListItem = leadermenuList.getItems(leadercamlQuery); leaderclientContext.load(leadercollListItem); leaderclientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess1), Function.createDelegate(this, this.onFailed1)); }

 function onSuccess1(sender, args) {

 var leaderlistItemData = '';
 var LeaderlistItemEnumerator = leadercollListItem.getEnumerator();
 var gotParent='false';

 // Build Dynamic Homepage Menu

 while (LeaderlistItemEnumerator.moveNext()) {

 var LeaderoListItem = LeaderlistItemEnumerator.get_current();
 // '\nUnique role assignments: ' + LeaderoListItem.get_hasUniqueRoleAssignments();
 var LeaderpTitle = LeaderoListItem.get_item('Title');
 var LeaderoParent = LeaderoListItem.get_item('ParentLink'); if(window.location.href==LeaderoListItem.get_item('URL'))
{
 if(LeaderoListItem.get_item('ImageUrl')!=null || LeaderoListItem.get_item('ImageUrl')=='')

 { var imgeurlbg = LeaderoListItem.get_item('ImageUrl'); //$('#topnavbg').attr('background-image','url("'+ imgeurlbg +'")'); $('#topnavbg').css('background-image', 'url(' + imgeurlbg + ')'); } setImageText(LeaderoListItem.get_item('ImageTitle'),LeaderoListItem.get_item('ImageByLineText')); } // Append menu string if item has no ParentLink if (!LeaderoParent) { leaderlistItemData += '\n

' + LeaderpTitle + ''; if(LeaderoListItem.get_item('URL')==window.location.href) { showBreadCum('','',LeaderpTitle); } // Build menu item's submenu var LeaderlistItemEnumeratorSub = leadercollListItem.getEnumerator(); var LeadersSubHTML = ''; while (LeaderlistItemEnumeratorSub.moveNext()) { var LeaderoListItemSub = LeaderlistItemEnumeratorSub.get_current(); var LeadersParent = LeaderoListItemSub.get_item('ParentLink'); if (LeadersParent) { LeadersParent = LeadersParent.get_lookupValue().toString(); if (LeaderpTitle == LeadersParent) { LeadersSubHTML += '\n

' + LeaderoListItemSub.get_item('Title') + '

'; if((LeaderoListItemSub.get_item('URL')==window.location.href)) { showBreadCum(LeaderpTitle,LeaderoListItem.get_item('URL'),LeaderoListItemSub.get_item('Title')); } } } } if (LeadersSubHTML != '') {leaderlistItemData += '\n

' + LeadersSubHTML + '\n

\n';} else {leaderlistItemData += '';} } } var LeadersMenuHTML = '

\n

' + leaderlistItemData + '\n

\n

'; //alert(sMenuHTML); // Populate menu as soon as we have the data // This will not complete before element has rendered var Leaderobj = document.getElementById('asuTopNav'); if (Leaderobj) {Leaderobj.innerHTML = LeadersMenuHTML ;} }