I created the following SP Services code but it does not display anything on the SharePoint page screen, the code is:
< style >
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul# nav {
margin: 0 0 0 200px;
}
ul.drop a {
display: block;
color: #fff;
font - family: Verdana;
font - size: 14px;
text - decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list - style: none;
margin: 0;
padding: 0;
border: 1px solid# fff;
background: #555; color: # fff;
}
ul.drop {
position: relative;
z - index: 597;
float: left;
}
ul.drop li {
float: left;
line - height: 1.3em;
vertical - align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li: hover {
position: relative;
z - index: 599;
cursor: default;
background: #1e7c9a; }
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;
width: 195px;
background: # 555;
border: 1px solid# fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100 % ;
}
ul.drop li: hover > ul {
visibility: visible
} < /style>
<script src="/sites / dev / SiteAssets / jquery - 2.1.4.min.js " type="
text / javascript "></script>
<script src=" / sites / dev / SiteAssets / jquery.SPServices - 2014.02.min.js " type="
text / javascript "></script>
<!-- HTML (placeholder) -->
<ul id="nav " class="drop">
</ul>
<script type="
text / javascript ">
$(document).ready(function () {
// Define the menu links list name.
var menuLinksListName = "
Menu % 20Links ";
// Define the fields string for the GetListItems operation.
var fields = " < ViewFields > < FieldRef Name = 'Title' / > < FieldRef Name = 'URL' / >
< FieldRef Name = 'Group' / > < FieldRef Name = 'SortOrder' / > < /ViewFields>";
/ / Build the query string
for the GetListItems operation.
var query = "<Query><OrderBy><FieldRef Name='Group' />
<FieldRef Name='SortOrder' Descending='True' /></OrderBy></Query>";
// Queries the 'MenuLinks' list to retrieve the menu items.
// Then iterates through the records to build the menu/HTML.
$().SPServices({
operation: "GetListItems",
async: false,
listName: menuLinksListName,
CAMLViewFields: fields,
CAMLQuery: query,
completefunc: function(xData, Status) {
// Clear any existing HTML within the "nav" element.
$("#nav").html('');
var lastGroup = -1;
var menuString = '';
// Loop through the retrieved SharePoint list items.
$(xData.responseXML).SPFilterNode("rs:data").SPFilterNode("z:row").each(function() {
// Extract the SharePoint list item data into variables.
var title = $(this).attr("ows_Title");
var url = $(this).attr("ows_URL");
var group = $(this).attr("ows_Group");
var sortOrder = $(this).attr("ows_SortOrder");
// For a SharePoint column defined as a Hyperlink, the URL must be further parsed.
var url_webaddress = '';
if (url != null)
url_webaddress = url.split(",")[0];
// Format the HTML for the menu items, and partition in their respective groups.
if (group != lastGroup) {
// If grouping change, close/open the HTML/list(s) tags as necessary.
if (lastGroup > -1) {
menuString += '</ul></li>';
}
menuString += '<li><a href="' + url_webaddress + '">' + title + '</a><ul>';
lastGroup = group;
} else {
// If grouping not change, continue loading the HTML/ordered list.
menuString += '<li><a href="' + url_webaddress + '">' + title + '</a></li>';
}
});
if (lastGroup > -1) {
menuString += '</ul></li>';
}
// Insert the created HTML code into the HTML placeholder (i.e. "nav") on the page.
$("#nav").append(menuString);
}
});
});
< /script>