office365前端js效果

这套首页是从网上找的一套静态html+css样式，自己给加了js改良了一下，把菜单效果都动态起来了。

效果图：

 

使用说明：

修改common.js里面的menus数据就行，加上ajax得到的菜单就可以变成动态的了

 

关于字体的使用，去看font里面的Demo就可以，运行起来就能看到效果

 

 

项目源码：

https://download.csdn.net/download/qq873113580/11667265

以上源码菜单只包含了二级菜单，2019-09-09加入无限级菜单，只需要替换common.js就行了

//高度自适应
$(window).resize(function (e) {
    $(".loginbox").height($(window).height());
    $(".main").height($(window).height() - $(".header").height() - $(".footer").height() - 1);
    $(".left").height($(".main").height());
    $(".right").height($(".main").height());
    $(".rightdown").height($(".right").height() - 27);
    $(".iframe").height($(window).height() - $(".header").height() - $(".footer").height() - 29);
}).resize();

//顶部菜单显示隐藏
$(".menuup").click(function () {
    $(".headdown").slideUp("fast");
});
$(".nav li").click(function () {
    $(".headdown").slideDown("fast");
});

//IE7下菜单背景BUG
$(".menuson li a").css("width", $(".menuson").width());

//隔行换色
$('.simpletable tbody tr:even').addClass('even');
var leftMen = {};
$(function () {
    var menus = [
        { id: 1, pid: 0, title: "首页", icon: "", url: "" },
        { id: 2, pid: 0, title: "常用", icon: "", url: "" },
        { id: 3, pid: 0, title: "扩展", icon: "", url: "" },
        { id: 4, pid: 0, title: "布局", icon: "", url: "" },
        { id: 5, pid: 0, title: "定制", icon: "", url: "" },
        { id: 6, pid: 0, title: "管理", icon: "", url: "" },
        { id: 7, pid: 1, title: "表单", icon: "", url: "" },
        { id: 8, pid: 1, title: "项目", icon: "", url: "" },
        { id: 9, pid: 2, title: "控制台", icon: "", url: "" },
        { id: 10, pid: 2, title: "微信", icon: "", url: "" },
        { id: 11, pid: 7, title: "百度1", icon: "", url: "https://www.baidu.com/" },
        { id: 12, pid: 11, title: "百度1.1", icon: "", url: "https://www.baidu.com/" },
        { id: 13, pid: 11, title: "百度1.2", icon: "", url: "https://www.hao123.com/" },
        { id: 14, pid: 7, title: "百度2", icon: "", url: "https://www.baidu.com/" },
        { id: 15, pid: 7, title: "百度3", icon: "", url: "https://www.baidu.com/" },
        { id: 16, pid: 8, title: "项目1", icon: "", url: "https://jingyan.baidu.com/" },
        { id: 17, pid: 13, title: "百度1.2.1", icon: "", url: "https://www.hao123.com/" },
        { id: 18, pid: 13, title: "百度1.2.2", icon: "", url: "https://www.hao123.com/" },
        { id: 19, pid: 14, title: "百度2.1", icon: "", url: "https://www.baidu.com/" },

    ];
    var treeData = arrayToTree(menus, "id", "pid");
    for (var i = 0; i < treeData.length; i++) {
        var html;
        if (i == 0) {
            html = $("

" + treeData[i].title + "

");
        } else {
            html = $("

" + treeData[i].title + "

");
        }
        //加首页
        $(".nav").append(html);
        //加第二个
        if (i == 0) {
            html = $("

");
        } else {
            html = $("

");
        }
        if (treeData[i].children == undefined) {
            continue;
        }
        for (var j = 0; j < treeData[i].children.length; j++) {
            //加到左边的菜单里面去
            if (treeData[i].children[j].children == undefined) {
                leftMen[treeData[i].children[j].id] = [];
            }
            else {
                leftMen[treeData[i].children[j].id] = treeData[i].children[j].children;
            }
            if (i == 0 && j == 0) {
                html.append("

" + treeData[i].children[j].icon + "" + treeData[i].children[j].title + "

");
            } else {
                html.append("

" + treeData[i].children[j].icon + "" + treeData[i].children[j].title + "

");
            }
            loadLeftMenu(leftMen[treeData[i].children[j].id], treeData[i].children[j].id);
        }
        $(".headdown").append(html);
    }
    init();
});

//加载左边菜单
function loadLeftMenu(menus, id) {
    var dom = $("

");
    if ($(".left").children().size() != 0) {
        dom = $("

");
    }
    //递归加载左侧菜单
    dgLoadLeftMenu(menus, dom);
    $(".left").append(dom);
}
//递归加载左侧菜单
function dgLoadLeftMenu(menus, dom) {
    for (var i = 0; i < menus.length; i++) {
        var html;
        if (menus[i].children == undefined || menus[i].children.length == 0) {
            html = $("

            + "\" data-id=\"" + menus[i].id
            + "\" data-title=\"" + menus[i].title + "\">" + menus[i].icon + "" + menus[i].title + "

");
        }
        else {
            html = $("

");
            html.append("" + menus[i].icon + "" + menus[i].title + "             var ul = $("

");
            //递归加载左侧菜单
            dgLoadLeftMenu(menus[i].children, ul);
            html.append(ul);
        }
        dom.append(html);
    }
}
//打开tab
function add_tab(tbEle) {
    var id = tbEle.attr("data-id");
    var title = tbEle.attr("data-title");
    var url = tbEle.attr("data-url");
    if ($("#frame_" + id).length == 0) {
        $(".menutab .tabselected").removeClass("tabselected");
        $(".rightdown iframe").hide();
        $(".menutab").append("

" + title + "

");
        $(".rightdown").append("");
    } else {
        //打开已有的
        setTimeout(function () {
            $("[data-iframe='frame_" + id + "']").click();
        }, 10);
    }
}
//自动tab高度
function aotu_tab(hg) {

    var top = parseInt($(".menutab").css("top").replace("px", ""));
    var height = parseInt($(".menutab").height());
    if (top != 0 && hg != height) {
        top = top + hg - height;
        $(".menutab").animate({ top: top + "px" });
    }
}

//向上菜单
function uptabmenu() {
    var hg = 25;
    var top = parseInt($(".menutab").css("top").replace("px", ""));
    var height = parseInt($(".menutab").height());
    if (-(top - hg) <= (height - hg)) {
        $(".menutab").animate({ top: (top - hg) + "px" });
    }
}
//向下菜单
function downtabmenu() {
    var hg = 25;
    var top = parseInt($(".menutab").css("top").replace("px", ""));
    var height = parseInt($(".menutab").height());
    if ((top + hg) <= 0) {
        $(".menutab").animate({ top: (top + hg) + "px" });
    }
}
function init() {
    //头部菜单按钮
    init_topmenu_event();
    //中部菜单按钮
    init_centermenu_event();
    //左边菜单事件注册
    init_leftmenu_event();
    //选择左边第一个菜单
    init_leftmenu_selected();
    //tab切换的时候
    tab_change();
}
function selectTab(ele) {
    $(".menutab").find(".tabselected").removeClass("tabselected");
    $(ele).addClass("tabselected");
    $(".rightdown iframe").hide();
    $("#" + $(ele).attr("data-iframe")).show();
}
//tab切换的时候
function tab_change() {
    $(".menutab li").live("click", function () {
        selectTab(this);
    });
    $(".menutab li i").live("click", function () {
        //关闭之前的高度
        var height = parseInt($(".menutab").height());
        //关闭
        var self = $(this).parent().parent();
        var id = self.attr("data-iframe");

        if (self.hasClass("tabselected")) {
            //先看前面，前面没有就选后面
            var dom = self.prev();
            if (dom.length == 0) {
                //没有就取后一个
                dom = self.next();
            }
            if (dom.length > 0) {
                selectTab(dom);
            }
        }
        $("#" + id).remove();
        self.remove();
        aotu_tab(height);
        return false;
    });
}

//头部菜单按钮
function init_topmenu_event() {
    $(".nav li a").live("click", function () {
        $(".nav li .selected").removeClass("selected");
        $(this).addClass("selected");
        $(".headdown .menu").hide();
        $("#" + $(this).attr("data-ct")).show()
    });
}

//中部菜单按钮
function init_centermenu_event() {
    $(".menu li a").live("click", function () {
        $(".menu li .selected").removeClass("selected");
        $(this).addClass("selected");

        $(".leftmenu").hide();
        $("#leftMen_" + $(this).attr("data-id")).show();
    });
}

//初始化按左侧菜单
function init_leftmenu_event() {
    $(".leftmenu li a").live("click", function () {
        debugger;
        if ($(this).parent().children().size() == 2) {
            //保证只有一个多选打开，去掉之后可以打开多个
            //$(this).parent().parent().children().each(function () {
            //    if ($(this).children().size() == 2) {
            //        $(this).children().eq(0).find("i").first().html("");
            //        $(this).children().eq(1).hide();
            //    }
            //});
            $(this).next().toggle();
            if ($(this).next().is(":hidden") == false) {
                $(this).find("i").first().html("");
            } else {
                $(this).find("i").first().html("");
            }
        } else {
            add_tab($(this));
        }
        $(".leftmenu li .selected").removeClass("selected");
        $(this).addClass("selected");
    });
}
//左侧菜单初始化显示情况
function init_leftmenu_selected() {
    var lis = $(".left .leftmenu").eq(0).children();
    dg_leftmenu_selected(lis);
}
//递归左侧菜单
function dg_leftmenu_selected(lis) {
    lis.each(function () {
        if ($(this).children().size() == 2) {
            $(this).children().eq(0).find("i").eq(0).html("");
            $(this).children().eq(1).toggle();
            var chs = $(this).children().eq(1).children();
            dg_leftmenu_selected(chs);
            return false;
        } else {
            $(this).children().eq(0).addClass("selected");
            //选择第一个
            add_tab($(this).children().eq(0));
            return false;
        }
    });
}

//将ID、ParentID这种数据格式转换为树格式
function arrayToTree(data, id, pid) {
    if (!data || !data.length) return [];
    var targetData = [];                    //存储数据的容器(返回)
    var records = {};
    var itemLength = data.length;           //数据集合的个数
    for (var i = 0; i < itemLength; i++) {
        var o = data[i];
        records[o[id]] = o;
    }
    for (var i = 0; i < itemLength; i++) {
        var currentData = data[i];
        var parentData = records[currentData[pid]];
        if (!parentData) {
            targetData.push(currentData);
            continue;
        }
        parentData.children = parentData.children || [];
        parentData.children.push(currentData);
    }
    return targetData;
}

 

 

以上版本是之上中左三级菜单，下面的commonjs是上做版本，中间的是快捷菜单

//高度自适应
$(window).resize(function (e) {
    $(".loginbox").height($(window).height());
    $(".main").height($(window).height() - $(".header").height() - $(".footer").height() - 1);
    $(".left").height($(".main").height());
    $(".right").height($(".main").height());
    $(".rightdown").height($(".right").height() - 27);
    $(".iframe").height($(window).height() - $(".header").height() - $(".footer").height() - 29);
}).resize();

//顶部菜单显示隐藏
$(".menuup").click(function () {
    $(".headdown").slideUp("fast");
});
$(".nav li").click(function () {
    $(".headdown").slideDown("fast");
});

//IE7下菜单背景BUG
$(".menuson li a").css("width", $(".menuson").width());

//隔行换色
$('.simpletable tbody tr:even').addClass('even');
var leftMen = {};
$(function () {
    var menus = [
        { type:"menu",id: 1, pid: 0, title: "首页", icon: "", url: "" },
        { type: "menu", id: 2, pid: 0, title: "常用", icon: "", url: "" },
        { type: "menu", id: 3, pid: 0, title: "扩展", icon: "", url: "" },
        { type: "menu", id: 4, pid: 0, title: "布局", icon: "", url: "" },
        { type: "menu", id: 5, pid: 0, title: "定制", icon: "", url: "" },
        { type: "menu", id: 6, pid: 0, title: "管理", icon: "", url: "" },
        { type: "btn", id: 7, pid: 1, title: "表单", icon: "", url: "" },
        { type: "btn", id: 8, pid: 1, title: "项目", icon: "", url: "" },
        { type: "btn", id: 9, pid: 2, title: "控制台", icon: "", url: "" },
        { type: "btn", id: 10, pid: 2, title: "微信", icon: "", url: "" },
        { type: "menu", id: 11, pid: 1, title: "百度1", icon: "", url: "https://www.baidu.com/" },
        { type: "menu", id: 12, pid: 1, title: "百度1.1", icon: "", url: "https://www.baidu.com/" },
        { type: "menu", id: 13, pid: 1, title: "百度1.2", icon: "", url: "https://www.hao123.com/" },
        { type: "menu", id: 14, pid: 1, title: "百度2", icon: "", url: "https://www.baidu.com/" },
        { type: "menu", id: 15, pid: 1, title: "百度3", icon: "", url: "https://www.baidu.com/" },
        { type: "menu", id: 16, pid: 2, title: "项目1", icon: "", url: "https://jingyan.baidu.com/" },
        { type: "menu", id: 17, pid: 13, title: "百度1.2.1", icon: "", url: "https://www.hao123.com/" },
        { type: "menu", id: 18, pid: 13, title: "百度1.2.2", icon: "", url: "https://www.hao123.com/" },
        { type: "menu", id: 19, pid: 14, title: "百度2.1", icon: "", url: "https://www.baidu.com/" },

    ];
    var treeData = arrayToTree(menus, "id", "pid");
    for (var i = 0; i < treeData.length; i++) {
        var html;
        if (i == 0) {
            html = $("

" + treeData[i].title + "

");
        } else {
            html = $("

" + treeData[i].title + "

");
        }
        //加首页
        $(".nav").append(html);
        //加第二个
        if (i == 0) {
            html = $("

");
        } else {
            html = $("

");
        }
        //加到左边的菜单里面去
        if (treeData[i].children == undefined) {
            treeData[i].children = [];
            leftMen[treeData[i].id] = [];
        }
        else {
            leftMen[treeData[i].id] = treeData[i].children;
        }
        loadLeftMenu(leftMen[treeData[i].id], treeData[i].id);
        for (var j = 0; j < treeData[i].children.length; j++) {
            if (treeData[i].children[j].type != "btn")
            {
                continue;
            }
            
            html.append("

            + "\" data-id=\"" + treeData[i].children[j].id
            + "\" data-title=\"" + treeData[i].children[j].title + "\"  href=\"javascript:void(0);\">" + treeData[i].children[j].icon + "" + treeData[i].children[j].title + "

");
        }
        $(".headdown").append(html);
    }
    init();
});

//加载左边菜单
function loadLeftMenu(menus, id) {
    var dom = $("

");
    if ($(".left").children().size() != 0) {
        dom = $("

");
    }
    //递归加载左侧菜单
    dgLoadLeftMenu(menus, dom);
    $(".left").append(dom);
}
//递归加载左侧菜单
function dgLoadLeftMenu(menus, dom) {
    for (var i = 0; i < menus.length; i++) {
        if (menus[i].type != "menu")
        {
            continue;
        }
        var html;
        if (menus[i].children == undefined || menus[i].children.length == 0) {
            html = $("

            + "\" data-id=\"" + menus[i].id
            + "\" data-title=\"" + menus[i].title + "\">" + menus[i].icon + "" + menus[i].title + "

");
        }
        else {
            html = $("

");
            html.append("" + menus[i].icon + "" + menus[i].title + "             var ul = $("

");
            //递归加载左侧菜单
            dgLoadLeftMenu(menus[i].children, ul);
            html.append(ul);
        }
        dom.append(html);
    }
}
//打开tab
function add_tab(tbEle) {
    var id = tbEle.attr("data-id");
    var title = tbEle.attr("data-title");
    var url = tbEle.attr("data-url");
    if ($("#frame_" + id).length == 0) {
        $(".menutab .tabselected").removeClass("tabselected");
        $(".rightdown iframe").hide();
        $(".menutab").append("

" + title + "

");
        $(".rightdown").append("");
    } else {
        //打开已有的
        setTimeout(function () {
            $("[data-iframe='frame_" + id + "']").click();
        }, 10);
    }
}
//自动tab高度
function aotu_tab(hg) {

    var top = parseInt($(".menutab").css("top").replace("px", ""));
    var height = parseInt($(".menutab").height());
    if (top != 0 && hg != height) {
        top = top + hg - height;
        $(".menutab").animate({ top: top + "px" });
    }
}

//向上菜单
function uptabmenu() {
    var hg = 25;
    var top = parseInt($(".menutab").css("top").replace("px", ""));
    var height = parseInt($(".menutab").height());
    if (-(top - hg) <= (height - hg)) {
        $(".menutab").animate({ top: (top - hg) + "px" });
    }
}
//向下菜单
function downtabmenu() {
    var hg = 25;
    var top = parseInt($(".menutab").css("top").replace("px", ""));
    var height = parseInt($(".menutab").height());
    if ((top + hg) <= 0) {
        $(".menutab").animate({ top: (top + hg) + "px" });
    }
}
function init() {
    //头部菜单按钮
    init_topmenu_event();
    //中部菜单按钮
    init_centermenu_event();
    //左边菜单事件注册
    init_leftmenu_event();
    //选择左边第一个菜单
    init_leftmenu_selected();
    //tab切换的时候
    tab_change();
}
function selectTab(ele) {
    $(".menutab").find(".tabselected").removeClass("tabselected");
    $(ele).addClass("tabselected");
    $(".rightdown iframe").hide();
    $("#" + $(ele).attr("data-iframe")).show();
}
//tab切换的时候
function tab_change() {
    $(".menutab li").live("click", function () {
        selectTab(this);
    });
    $(".menutab li i").live("click", function () {
        //关闭之前的高度
        var height = parseInt($(".menutab").height());
        //关闭
        var self = $(this).parent().parent();
        var id = self.attr("data-iframe");

        if (self.hasClass("tabselected")) {
            //先看前面，前面没有就选后面
            var dom = self.prev();
            if (dom.length == 0) {
                //没有就取后一个
                dom = self.next();
            }
            if (dom.length > 0) {
                selectTab(dom);
            }
        }
        $("#" + id).remove();
        self.remove();
        aotu_tab(height);
        return false;
    });
}

//头部菜单按钮
function init_topmenu_event() {
    $(".nav li a").live("click", function () {
        $(".nav li .selected").removeClass("selected");
        $(this).addClass("selected");
        $(".headdown .menu").hide();
        $("#" + $(this).attr("data-ct")).show()

        $(".leftmenu").hide();
        $("#leftMen_" + $(this).attr("data-id")).show();
    });
}

//中部菜单按钮
function init_centermenu_event() {
    $(".menu li a").live("click", function () {
        $(".menu li .selected").removeClass("selected");
        $(this).addClass("selected");
        
        add_tab($(this));
    });
}

//初始化按左侧菜单
function init_leftmenu_event() {
    $(".leftmenu li a").live("click", function () {
        debugger;
        if ($(this).parent().children().size() == 2) {
            //保证只有一个多选打开，去掉之后可以打开多个
            //$(this).parent().parent().children().each(function () {
            //    if ($(this).children().size() == 2) {
            //        $(this).children().eq(0).find("i").first().html("");
            //        $(this).children().eq(1).hide();
            //    }
            //});
            $(this).next().toggle();
            if ($(this).next().is(":hidden") == false) {
                $(this).find("i").first().html("");
            } else {
                $(this).find("i").first().html("");
            }
        } else {
            add_tab($(this));
        }
        $(".leftmenu li .selected").removeClass("selected");
        $(this).addClass("selected");
    });
}
//左侧菜单初始化显示情况
function init_leftmenu_selected() {
    var lis = $(".left .leftmenu").eq(0).children();
    dg_leftmenu_selected(lis);
}
//递归左侧菜单
function dg_leftmenu_selected(lis) {
    lis.each(function () {
        if ($(this).children().size() == 2) {
            $(this).children().eq(0).find("i").eq(0).html("");
            $(this).children().eq(1).toggle();
            var chs = $(this).children().eq(1).children();
            dg_leftmenu_selected(chs);
            return false;
        } else {
            $(this).children().eq(0).addClass("selected");
            //选择第一个
            add_tab($(this).children().eq(0));
            return false;
        }
    });
}

//将ID、ParentID这种数据格式转换为树格式
function arrayToTree(data, id, pid) {
    if (!data || !data.length) return [];
    var targetData = [];                    //存储数据的容器(返回)
    var records = {};
    var itemLength = data.length;           //数据集合的个数
    for (var i = 0; i < itemLength; i++) {
        var o = data[i];
        records[o[id]] = o;
    }
    for (var i = 0; i < itemLength; i++) {
        var currentData = data[i];
        var parentData = records[currentData[pid]];
        if (!parentData) {
            targetData.push(currentData);
            continue;
        }
        parentData.children = parentData.children || [];
        parentData.children.push(currentData);
    }
    return targetData;
}