Custom Managed Navigation in SharePoint 2013



SharePoint provide the default control,

but the design is ugly. in general, we can add css to cover the default style, but it is not free and hard to custom its UI. now we have found a grate way to implement it. 

The default managed navigation UI:

Managed Metadata Service:

The result of the custom Managed Naviagtion:

Menu 1:

Menu 2:


Menu 3:

Implement in detail


1. Create http handle service to provide the term store data for client


I have attempted different ways to get the navigation data and its struct. due to the data is from Term Store. see Sharepoint 2013 Retrieve Taxonomy Term Store via Javascript.  in detail .

success to get the data, but failed to general its struct since client object model execute in async, it is discouraged.

I have to create a service to retrieve the term store in server and return the json object, then call the service to get the json data  in client, finally, generate the navigation struct, it is a workaround way.

you can get the json data by the URL: /_layouts/15/yourproject/GetNavigation.ashx (learning how to create handle, see my blog in detail:Create and Call HttpHandler in SharePoint  )

a. Retrieve the term store using Server API, at the moment, it would improve the performance using Http context cache

public static  class CacheNavigation
    {
        const string AudienceGroupListCacheKey = "CacheKey";
        const string SessionNavigationKey = "navigationKey_";
        const int CacheExpritaionTimeInSeconds = 60; // 10 minutes
        const string LogFeatureName = "CacheNavigation";

        public class NavigationItem
        {
            public string Title { get; set; }
            public string Url { get; set; }
            public string Description { get; set; }
            public string ParentNode { get; set; }
            public Boolean HasChildNodes { get; set; }

            public NavigationItem(string title, string url, string description, string parentNode, Boolean hasChildNodes)
            {
                Url = url;
                Title = title;
                Description = description;
                ParentNode = parentNode;
                HasChildNodes = hasChildNodes;
            }
        }

        public static List<NavigationItem> GetTerms()
        {
            List<NavigationItem> groups = new List<NavigationItem>();
            groups = HttpContext.Current.Cache[AudienceGroupListCacheKey] as List<NavigationItem>;
            if (groups == null) {
                groups = new List<NavigationItem>();
                SiteMapNode rootNode = SiteMap.Providers["GlobalNavigationTaxonomyProvider"].RootNode;
                if (rootNode != null)
                {
                    foreach (SiteMapNode term in rootNode.GetAllNodes())
                    {
                        groups.Add(new NavigationItem(term.Title, term.Url, term.Description, term.ParentNode.Title, term.HasChildNodes));
                    }
                }
                HttpContext.Current.Cache.Insert(AudienceGroupListCacheKey, groups, null, DateTime.Now.AddSeconds(CacheExpritaionTimeInSeconds), TimeSpan.Zero);
            }
            return groups;
        }
    }


b. Create a handle

public class GetNavigation : IHttpHandler
    {
        public bool IsReusable
        {
            get { return true; }
        }
        /// <summary>
        /// Return json-serialized Dictionary url --> ToHide
        /// </summary> to 
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            if (context == null || context.Response == null)
            {
                throw new ArgumentNullException("context", "context can not be null");
            }

            JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
            context.Response.ContentType = "application/json";
            var jsonResult = new JsonResult();

            var currentuserNavigation = CacheNavigation.GetTerms();
            jsonResult.Data.Add(currentuserNavigation);
            context.Response.Write(jsonSerializer.Serialize(jsonResult));
        }
    }

2. Call the hande to get the navigation data and general html layout 


a. Call the handle to get data

Function.registerNamespace('StorePortal.GlobalNavigation');
<span style="font-family:Consolas;font-size:12px;"><span style="font-family:Consolas;font-size:12px;"></span></span><p>termNavigation = { $_index: [] };</p><p>// call handle service, and return json data
StorePortal.GlobalNavigation.GetNavigationJson = function() {
    $.ajax({
        url: _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/../GetNavigation.ashx",
        type: "get",
        dataType: "json",
        success: function (result) {
            StorePortal.GlobalNavigation.GetNavigationData(result.Data[0]);
        }
    });
}</p>

b. Save the json object into Array

// retrieve json datan and convert it to array
StorePortal.GlobalNavigation.GetNavigationData = function(result) {
    $.each(result, function (index, key) {
        console.log(this.Title);
        var title = this.Title;
        var url = this.Url;
        var parentNode = this.ParentNode;
        if (parentNode == "Store Portal") {
            termNavigation.$_index.push(title);
            termNavigation[title] = { Title: title, Url: url };
            termNavigation[title].children = { $_index: [] };
        }
        else if (termNavigation[parentNode]) {
            var subTermNavigation = termNavigation[parentNode];
            subTermNavigation.children.$_index.push(title);
            subTermNavigation.children[title] = { Title: title, Url: url };
            subTermNavigation.children[title].children = { $_index: [] };
        }
        else {
            $.each(termNavigation.$_index, function (index1, key1) {
                var current = termNavigation[termNavigation.$_index[index1]];
                var flag = 0;
                $.each(current.children.$_index, function (index2, key2) {
                    if (current.children.$_index[index2] == parentNode) {
                        var rootTermNavigation = current.children[current.children.$_index[index2]];
                        rootTermNavigation.children.$_index.push(title);
                        rootTermNavigation.children[title] = { Title: title, Url: url };
                        flag = 1;
                        return false;
                    }
                });
                if (flag == 1) {
                    return false;
                }
            });
        }
    });

    StorePortal.GlobalNavigation.GeneralNavigationLayout(termNavigation);
    return termNavigation;
}

c. Generate the HTML and  render it

// General html layout
StorePortal.GlobalNavigation.GeneralNavigationLayout = function (termNavigation) {
    var HTML = '<ul class="nav-contains">';
    $.each(termNavigation.$_index, function (index1, key1) {
        var currentTop = termNavigation[termNavigation.$_index[index1]];
        //FOH
        if (currentTop.children.$_index.length != 0) {
            HTML += '<li class="nav-children ' + currentTop.Title.replace(/ /g, "").replace(/&/g, "") + '"><a href="' + currentTop.Url + '">' + currentTop.Title + ' <i class="fa fa-angle-down"></i><i class="fa fa-angle-up" style="display:none"></i></a>';
            HTML += '<div class="nav-menu sp-shadow">';
            HTML += '<a href="' + currentTop.Url + '" class="nav-title">' + currentTop.Title + ' <i class="fa fa-angle-right"></i></a> ';

            $.each(currentTop.children.$_index, function (index2, key2) {
                var secondTermNavigation = currentTop.children[currentTop.children.$_index[index2]];

                if (index2 == 0 || index2 == 3) {
                    HTML += '<div class="nav-sub-row">';
                }
                HTML += '<div class="nav-sub-cell"> ';
                // Product
                if (secondTermNavigation.children.$_index != 0) {
                    HTML += '<a href="' + secondTermNavigation.Url + '">' + secondTermNavigation.Title + ' <i class="fa fa-angle-right"></i></a>';
                    HTML += '<ul>';
                    //price change
                    $.each(secondTermNavigation.children.$_index, function (index3, key) {
                        HTML += '<li>';
                        var rootTermNavigation = secondTermNavigation.children[secondTermNavigation.children.$_index[index3]];
                        HTML += '<a href="' + rootTermNavigation.Url + '">' + rootTermNavigation.Title + '</a>';
                        HTML += '</li>'
                    });
                    HTML += '</ul>';
                }
                else {
                    // Product
                    HTML += '<a href="' + secondTermNavigation.Url + '">' + secondTermNavigation.Title + '</a>';
                }

                HTML += '</div>';
                if (index2 == 2 || (index2 != 2 && index2 == (currentTop.children.$_index.length - 1))) {
                    HTML += '</div>';
                }
            });
            HTML += '</div>';
        }
        else {
            HTML += '<li class="nav-children ' + currentTop.Title.replace(/ /g, "").replace(/&/g, "") + '"><a href="' + currentTop.Url + '">' + currentTop.Title + '</a>';
        }

        HTML += '</li>';
    });
    HTML += '<ul>';
    $(".navigation").append(HTML);
}

d.  Add the relevant event in document ready

$(function () {
    StorePortal.GlobalNavigation.GetNavigationJson();
    $(".navigation").on("click", ".nav-children > a", function (event) {
        if ($(this).next().length > 0) {
            var target = $(event.target);
            event.preventDefault();
            if ($(this).next()[0].style.display == "none" || $(this).next()[0].style.display == "") {
                $(".nav-menu").hide();
                $(".fa-angle-up").hide();
                $(".fa-angle-down").show();
                $(this).next().toggle();
                $(this).find(".fa-angle-down").toggle();
                $(this).find(".fa-angle-up").toggle();
            }
            else {
                $(".fa-angle-up").hide();
                $(".fa-angle-down").show();
                $(this).next().hide();
            }
        }
    });
   
    $("body").on("click", function (event) {
        var target = $(event.target);
        if (target.closest(".nav-children").length==0 || !($.contains(target.closest(".nav-children")[0], event.target))) {
            $(".nav-menu").hide();
            $(".fa-angle-up").hide();
            $(".fa-angle-down").show();
        }
    });
});


e. Finally, Add the CSS

.navigation {
    margin-bottom:500px;
}

.navigation ul {
    padding: 0px;
}
a{
    white-space: nowrap;
}
.nav-children {
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    color: #464646;
    letter-spacing: 0.02em;
    line-height: 24px;
}

.nav-contains > li {
    font-size: 20px;
    line-height: 24px;
}

.nav-menu {
    display: none;
    position: absolute;
    left: 0px;
    top: 40px;
    padding: 20px;
    padding-top: 10px;
    color: #fff;
    font-family: "Segoe UI light";
    z-index: 9999;
    border: 1px solid rgba(0, 0, 0, 0);
}

    .nav-menu .nav-title {
        display: inline-block;
        font-size: 36px;
        font-family: "Segoe UI light";
        margin: 30px 0;
    }

    .nav-menu a {
        color: white !important;
        font-family: "Segoe UI light";
    }

.nav-sub-row {
    display: table-row;
}

.nav-sub-cell {
    display: table-cell;
    padding-right: 60px;
    padding-bottom: 50px;
}

    .nav-sub-cell li {
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .nav-sub-cell > a {
        display: block;
        font-size: 26px;
        white-space: nowrap;
        padding-bottom: 10px;
    }

    .nav-sub-cell li a {
        font-size: 15px;
        white-space: nowrap;
    }


.FrontofHouse .nav-menu {
    background-color: #B4009E;
}

.BackofHouse .nav-menu {
    background: #7A44A2;
}

.Learning .nav-menu {
   background: #107C10;
}

.HR .nav-menu {
    background: #008272;
}

.CompanyCulture .nav-menu {
   background: #D83B01;
}


.FrontofHouse > a:hover {
    color: #B4009E !important;
}

.BackofHouse > a:hover {
    color: #7A44A2 !important;
}

.Learning > a:hover {
   color: #107C10 !important;
}

.HR > a:hover {
    color: #008272 !important;
}

.CompanyCulture > a:hover {
   color: #D83B01 !important;
}

.SharePoint > a:hover {
    color: #B4009E !important;
}

.ObjectModel > a:hover {
    color: #7A44A2 !important;
}

.Top > a:hover {
   color: #107C10 !important;
}

.SharePoint .nav-menu {
    background-color: #B4009E;
}

.ObjectModel .nav-menu {
    background: #7A44A2;
}

.Top .nav-menu {
   background: #107C10;
}

please email to me if you want get the total code


































1. 用户与身体信息管理模块 用户信息管理: 注册登录:支持手机号 / 邮箱注册,密码加密存储,提供第三方快捷登录(模拟) 个人资料:记录基本信息(姓名、年龄、性别、身高、体重、职业) 健康目标:用户设置目标(如 “减重 5kg”“增肌”“维持健康”)及期望周期 身体状态跟踪: 体重记录:定期录入体重数据,生成体重变化曲线(折线图) 身体指标:记录 BMI(自动计算)、体脂率(可选)、基础代谢率(根据身高体重估算) 健康状况:用户可填写特殊情况(如糖尿病、过敏食物、素食偏好),系统据此调整推荐 2. 膳食记录与食物数据库模块 食物数据库: 基础信息:包含常见食物(如米饭、鸡蛋、牛肉)的名称、类别(主食 / 肉类 / 蔬菜等)、每份重量 营养成分:记录每 100g 食物的热量(kcal)、蛋白质、脂肪、碳水化合物、维生素、矿物质含量 数据库维护:管理员可添加新食物、更新营养数据,支持按名称 / 类别检索 膳食记录功能: 快速记录:用户选择食物、输入食用量(克 / 份),系统自动计算摄入的营养成分 餐次分类:按早餐 / 午餐 / 晚餐 / 加餐分类记录,支持上传餐食照片(可选) 批量操作:提供常见套餐模板(如 “三明治 + 牛奶”),一键添加到记录 历史记录:按日期查看过往膳食记录,支持编辑 / 删除错误记录 3. 营养分析模块 每日营养摄入分析: 核心指标计算:统计当日摄入的总热量、蛋白质 / 脂肪 / 碳水化合物占比(按每日推荐量对比) 微量营养素分析:检查维生素(如维生素 C、钙、铁)的摄入是否达标 平衡评估:生成 “营养平衡度” 评分(0-100 分),指出摄入过剩或不足的营养素 趋势分析: 周 / 月营养趋势:用折线图展示近 7 天 / 30 天的热量、三大营养素摄入变化 对比分析:将实际摄入与推荐量对比(如 “蛋白质摄入仅达到推荐量的 70%”) 目标达成率:针对健
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值