Creating a Drop-down Enabled Menu with JavaScript and Lists

drop-down-menu-featured-img

OVERVIEW

With this post, I’m going to show you how I created a drop-down navigation menu for your intranet site using basic JavaScript and a custom list in SharePoint. By creating the navigation in a list and rendering it via JavaScript, I’m able to make the menu easier to update for our content managers. It also does not require any coding knowledge to update, change, or add items to the navigation menu. The CSS included in the GitHub repo listed below makes the menu responsive.

Here is an example of the menu without displaying the drop-down selections:

menu-example-nodropdown

Here is an example of the menu displaying the drop-down menus:

displaying-menu-dropdowns

SHAREPOINT LIST

The SharePoint list is what I use to store the items, links, and other information about our menu. The list is custom and I chose to call it menuLinks. You can call yours whatever you want. There are a total of six columns. They are as follows:

  • Title (type: Single line of text, required)- this is the text that users will see
  • URL (type: Single line of text, required)- This is the url that the menu item will point to
  • sortOrder (type: Single line of text, required) – This allows custom sorting of the menu items
  • parentCategory (type: lookup) – This is used for the drop-down part of the menu. This is a lookup column that gets its information from the next column – parentID. This places the child menu items under the parent.
  • parentID (type: Single line of text)- This column is used to identify the parent item for the drop-down menu.
  • isMain (type: Yes/No) – This column is used to tell the scripts whether or not to render the menu item as a parent or child. If this is selected, then it will appear as part of the main navigation.

Here is a view of how our list is created and populated with data:

list-menu-filled

 

THE CODE

The code consists of two simple ajax calls. The first one calls the list looking for the main items. It then renders each of the main items. The second ajax call then creates your sub-menu items and places them within their respective parent category.

Here is the document ready call:

1
2
3
4
$(document).ready(function(){
buildLinks();
buildSubMenus();
});

Here is the first method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function buildLinks(){
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl +"/_api/web/lists/getbytitle('menuLinks')/items?$orderby=sortOrder asc",
type: "GET",
headers: { "accept": "application/json;odata=verbose" },
success: function(data) {
if (data.d.results) {
var object = data.d.results;
for (var i = 0; i < object.length; i++) {
if(object[i].isMain == true){
if(object[i].parentID != null){
$('#menuList').append('
<ul>
    <li class="dropdown"><a class="dropbtn" href="'
+ object[i].URL +'">'+ object[i].Title +'</a>
<div id="parentCategoryId'
+object[i].ID+'" class="dropdown-content"></div></li>
</ul>
'
);
console.log(object[i].ID);
}
else {
$('#menuList').append('
<ul>
    <li><a href="'
+ object[i].URL +'">'+ object[i].Title +'</a></li>
</ul>
'
);
}
}

}
}
},
error: function(xhr, text_status) {
alert(xhr.status + ': ' + xhr.statusText);
}
});
}

Here is the second method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function buildSubMenus(){
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('menuLinks')/items?$orderby=sortOrder asc",
type: "GET",
headers: { "accept": "application/json;odata=verbose" },
success: function(data) {
if (data.d.results) {
var object = data.d.results;
for (var i = 0; i &lt; object.length; i++) {
if(object[i].isMain != true){
var catID = object[i].parentCategoryId;
$('#parentCategoryId'+object[i].parentCategoryId).append('
<ul>
    <li><a href="'
+ object[i].URL +'">'+ object[i].Title +'</a></li>
</ul>
'
);
console.log('parentCategoryId'+object[i].parentCategoryId);
}

}
}
},
error: function(xhr, text_status) {
alert(xhr.status + ': ' + xhr.statusText);
}
});
}

 

RESPONSIVE DISPLAY

The CSS included in the repo allows this menu to be responsive. Here is the view of the menu in the mobile format:

mobile-views

 

 

 

 

 

If you would like to use this code or change any of it, I have added it to my git-hub rep. The repo also includes the CSS and HTML required to give it the drop-down functionality.
Here is the code.

Need help with SharePoint? Feel free to contact me.

Have a bigger project? Check out my company, UDig, LLC.