How I can use this code:


    <link href=".../jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src=".../jquery-ui.min.js" type="text/javascript"></script>
    <script src=".../jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(document).ready(function() {

        $.getJSON(".../_vti_bin/ListData.svc/Categories?$orderby=ParentCategoryId",function(data) {

            var categories = new Array();
            var catCounter = 0;

            $.each (data.d.results, function(i,result) {

                var title = result.Title;
                var catId = result.Id;
                var parentCatId = result.ParentCategoryId;

                // collecting main categories...                
                if (parentCatId == null || parentCatId == 0) {

                    categories[catCounter] = new Object();
                    categories[catCounter]["Id"] = catId;
                    categories[catCounter]["Title"] = title;
                    categories[catCounter]["SubCategories"] = new Array();


                } else { 

                    for (var i = 0; i < categories.length; i++) {   

                    // appending sub categories...
                        if (categories[i]["Id"] == parentCatId) {

                            var subCatLength = categories[i]["SubCategories"].length;

                            categories[i]["SubCategories"][subCatLength] = new Object();
                            categories[i]["SubCategories"][subCatLength]["Id"] = catId;
                            categories[i]["SubCategories"][subCatLength]["Title"] = title;
                            categories[i]["SubCategories"][subCatLength]["ParentCatId"] = parentCatId;


            // rendering to html list...
            var htmlString = "<ul class='root static'>";
            htmlString += "<li class='static'>";
            htmlString += "<a class='static menu-item' href='.../Lists/Categories/AllCategories.aspx'>";
            htmlString += "<span class='additional-background'><span class='menu-item-text'>Categories</span></span></a>";

            for (var i = 0; i < categories.length; i++) {   

                var catIdRender = categories[i]["Id"];
                var titleRender = categories[i]["Title"];
                var catsRender = categories[i]["SubCategories"];

                htmlString += "<ul class='static' style='width:145px; margin:0px 0px 0px 0px;'>";
                htmlString += "<li class='static' style='font-weight: bold; width: 200px;'><a class='static menu-item' href='.../Lists/Categories/Category.aspx?CategoryId=" + catIdRender + "&amp;Name=" + titleRender + "' id='blgcat"+ catIdRender +"'><span class='additional-backgroud'><span class='menu-item-text'>" + titleRender + "</span></span></a></li>";

                if (catsRender.length > 0) {
                    for (var j = 0; j < catsRender.length; j++) {   
                        htmlString += "<li class='static' style='padding-left: 10px;'>";
                        htmlString += "<a class='static menu-item' href='.../Lists/Categories/Category.aspx?CategoryId=" + catIdRender + "&amp;Name=" + catsRender[j]["Title"] + "' id='blgcat"+ catIdRender +"'><span class='additional-backgroud'><span class='menu-item-text'>" + catsRender[j]["Title"] + "</span></span></a>";
                        htmlString += "</li>";

                htmlString += "</ul>";
            htmlString += "</li></ul>";
    <div class='s4-ql menu vertical' id='myCategories' />

I try to add html, aspx and js file. I'm beginner in dev SharePoint. Which site i must use, to get this same navigation panel as I metione in link below?

I need navigation in a Blog site that will have a "Main Category" (a few) and a sub category or even sub-sub, sub-sub-sub category navigation tree. Should I need to create new webpart? masterpage? html site? to display my categories in that way like is in link?

Best regards.


Actually, the snippet you posted doesn't have any direct dependency to the usage of a specific site definition/template. Instead, it requires the presence of a "Category" list with a specific structure somewhere in the site collection (notice the ".../_vti_bin/ListData.svc/Categories?$orderby=ParentCategoryId" url in the $.getJSON(...) call - this should be changed as needed to point to the actual list position).

So, how can you create this list? Your sample is talking about a "Blog", so I assume they must have used the Blog site definition. You should be able to just create a new subsite using this template and work up from there. Notice that the script you posted builds up a "menu" from a list of categories and subcategories stored in the Category list, and then adds the menu to a control with id "myCategories" (see $("#myCategories").append(htmlString);). As such, in order for the menu to be built as expected you need to:

  • have a valid Category list with the expected structure (a site created ftom the blog site definition should already have that). The list must be already populated with the categories you are going to display.
  • the page you want the menu to appear on must contain a control with id myCategories. The control can be placed directly on the specific page or on the site masterpage based on your needs.

That said, you didn't really specified why you are attempting to use the code from the sample you linked. Are you too aiming to create a custom navigation for a blog site or you just need a menu similar to the one in the linked question? If you are not going to use the blog functionalities, your best option would be to just replicate the Category list on your site "manually" either by copying it, saving it as a template from a blog site or activating the BlogContent feature on your site and then deactivating it (this should create the list but it is probably going to perform some other configurations on the site, so use it as a last resort option).

  • SPArcheologist thank you for your answer. I need navigation in a Blog site that will have a "Main Category" (a few) and a sub category or even sub-sub, sub-sub-sub category navigation tree. Should I need to create new webpart? masterpage? html site? to display my categories in that way like is in link? – Krzysztof S. Apr 25 '16 at 9:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.