microbee-http 丨 软件开发框架
microbee-http 丨 软件开发框架 > 快速开始 > MICROBEE-FRONT > 框架工具组件 > 导航菜单

导航菜单

使用说明：

html文件中定义div容器，定义导航菜单配置项navOptions（参数见下方说明），调用导航菜单初始化方法McrbHttpClient.navMenu.init(navOptions)。

参数说明：

参数说明
id导航菜单容器id
fontColor字体颜色(非必填，默认为#aaa)
fontSize字体大小(非必填，默认为16px)
backgroundColor背景色(非必填，默认为#2F4056)
activeIndex初始状态时被激活的栏目的序号（非必填）
activeFontColor被激活栏目的字体颜色(非必填，默认为#fff)
activeBackgroundColor被激活栏目的背景色(非必填，默认为#396ae7)
openBtn展开按钮的url地址（非必填）
closeBtn收起按钮的url地址（非必填）
group (Array)导航菜单栏目group

group为数组类型，内部包含一个或多个导航菜单的栏目对象，导航菜单的栏目对象的参数如下

参数说明
index栏目的index
title栏目的标题
icon栏目图标（非必填）
activeIcon激活栏目的图标（非必填）
href点击该栏目跳转的url（非必填）
callback点击该栏目后的回调（非必填）
children该栏目的子栏目，为数组类型，包含一个或多个导航菜单的栏目对象

用法实例：

<div id="testmenu"></div>
<script type="text/javascript">
    let menuOptions = {
        id: "testmenu",
        activeIndex: "1-1",
        fontSize: "20px",
        group: [{
                index: "0",
                title: "首页",
                href: "",
                icon: './img/tip_icon1_2.png',
                activeIcon: './img/tip_icon1_1.png',
            },
            {
                index: "1",
                title: "栏目一",
                icon: './img/tip_icon2_2.png',
                activeIcon: './img/tip_icon2_1.png',
                children: [{
                        index: "1-1",
                        title: "<span>子栏目一</span>",
                        href: "",
                    },
                    {
                        index: "1-2",
                        title: "子栏目二",
                        children: [{
                                index: "1-2-1",
                                title: "三级栏目一",
                                href: "https://www.baidu.com",
                            },
                            {
                                index: "1-2-2",
                                title: "三级栏目二",
                            },
                            {
                                index: "1-2-3",
                                title: "三级栏目三",
                                children: [{
                                    index: "1-2-3-1",
                                    title: "四级栏目一",
                                }, ],
                            },
                        ],
                    },
                ],
            },
            {
                index: "2",
                title: "栏目二",
                callback: alertCol,
            },
            {
                index: "3",
                title: "栏目三",
                href: "",
                children: [{
                    index: "3-1",
                    title: "二级栏目",
                    href: "https://www.taobao.com",
                }, ],
            },
            {
                index: "4",
                title: "栏目四",
                href: "",
            },
        ],
    };
    McrbHttpClient.navMenu.init(menuOptions);

    function alertCol(option) {
        alert(option.title);
    }
</script>

效果展示:

 
本文档来自—microbee-http 丨 软件开发框架平台