Font Awesome圖標使用 Web右鍵多級菜單

Font Awesome圖標包含六七百個圖標,圖標豐富

Font Awesome圖標就是特殊的文字

可以隨意調整圖標顏色和圖標大小

加入引用

本地使用添加引用

<link rel="stylesheet" href="css/fontawesome-all.min.css" />   

注意webfonts文件夾同CSS文件夾同級

JS已封裝使用方便,只需要Json數據就可以在html頁面顯示

Demo下載

https://download.csdn.net/download/losedguest/10277118

效果如下

.正常顯示效果

節點展開的正常顯示

右邊距不夠顯示時的顯示在左邊

主要代碼如下

LexinMutiMenus.js

/*
LexinMutiMenus 右鍵多級菜單
Buider Losedguest
version: LexinMutiMenus 20180309

*/
(function () {
    //多級菜單控件
    window.LexinMutiMenus = {};
    //添加自己的屬性
    LexinMutiMenus.Commands = {
        ///創建多級菜單
        CreateMemnu: function (_MenuJson) {
            var _tempMenuDiv = document.createElement("div");
            _tempMenuDiv.setAttribute("class", "LexinMutiMenus");
            var _tempSubHtml = "";
            var _tempLen = _MenuJson.length;
            for (var i = 0; i < _tempLen; i++)
            {
                var _tempJson = _MenuJson[i];
                var _tempSubUL = "";
                if (_tempJson.subjson && _tempJson.subjson.length > 0)
                {
                    _tempSubUL = this.CreateSubMemnu(_tempJson.subjson);
                }
                if (_tempSubUL) {
                    _tempSubHtml += "<li class=\"Menus_Items Menus_Items_Sub\" data=\"" + _tempJson.id + "\"><i class=\"Menu_left " + _tempJson.ico + "\"> </i><span class=\"Menus_text\">" + _tempJson.text + "</span>" + _tempSubUL + "<i class=\"Menu_right\"> </i></li>";
                }
                else {
                    _tempSubHtml += "<li  class=\"Menus_Items\" data=\"" + _tempJson.id + "\"><i class=\"Menu_left " + _tempJson.ico + "\"> </i><span class=\"Menus_text\">" + _tempJson.text + "</span><i class=\"Menu_right\"> </i></li>";
                }
                
            }
            ///LexinMutiMenu_Fade透明的層,LexinMutiMenu為數據層
            $(_tempMenuDiv).append("<div class=\"LexinMutiMenu_Fade\"></div><div class=\"LexinMutiMenu\"><ul>" + _tempSubHtml + "</ul></div>");
            return _tempMenuDiv;
        },
        ///遞歸遍歷Json展開
        CreateSubMemnu: function (_MenuSubJson)
        {
            var _tempLen = _MenuSubJson.length;
            var _tempSubHtml = "";
            for (var i = 0; i < _tempLen; i++) {
                var _tempJson = _MenuSubJson[i];
                var _tempSubUL = "";
                if (_tempJson.subjson && _tempJson.subjson.length > 0) {
                    _tempSubUL = this.CreateSubMemnu(_tempJson.subjson);
                }
                if (_tempSubUL) {
                    _tempSubHtml += "<li class=\"Menus_Items Menus_Items_Sub\" data=\"" + _tempJson.id + "\"><i class=\"Menu_left " + _tempJson.ico + "\"> </i><span class=\"Menus_text\">" + _tempJson.text + "</span>" + _tempSubUL + "<i class=\"Menu_right\"> </i></li>";
                }
                else {
                    _tempSubHtml += "<li  class=\"Menus_Items\" data=\"" + _tempJson.id + "\"><i class=\"Menu_left " + _tempJson.ico + "\"> </i><span class=\"Menus_text\">" + _tempJson.text + "</span><i class=\"Menu_right\"> </i></li>";
                }
            }
            return "<ul>" + _tempSubHtml + "</ul>";
        }
    }
    ///_MenuJson數據結構{id:aaa,text:aaaaa,subjson:{id:bbb,text:bbbb,subjson:{}}},顯示位置_Menu_X,_Menu_Y,_MenuCallback單擊回執函數
    LexinMutiMenus.Show = function (_MenuJson, _Menu_X, _Menu_Y, _MenuCallback) {
        $("body").find(".LexinMutiMenus").remove();
        //做延時關閉
        var _tempShowTimer = _tempHideTimer = null;
        var _tempMaxWidth = _tempMaxHeight = 0;//最大可顯示的寬度和高度
        var _tempClientWidth = document.documentElement.offsetWidth;
        var _tempClientHeight = document.documentElement.offsetHeight;
        //顯示菜單不為空的情況下
        if (_MenuJson && _MenuJson.length > 0)
        {
            var _tempMenus = LexinMutiMenus.Commands.CreateMemnu(_MenuJson);          
            $("body").append(_tempMenus.outerHTML);
            var _tempMutiMenu = $("body").find(".LexinMutiMenu")[0]
            _tempMutiMenu.style.left = _Menu_X + "px";
            _tempMutiMenu.style.top = _Menu_Y + "px";

            //最大显示范围
            _tempMaxWidth = _tempClientWidth - _tempMutiMenu.offsetWidth;
            _tempMaxHeight = _tempClientHeight - _tempMutiMenu.offsetHeight;

            //防止菜单溢出
            _tempMutiMenu.offsetTop > _tempMaxHeight && (_tempMutiMenu.style.top = _tempMaxHeight + "px");
            _tempMutiMenu.offsetLeft > _tempMaxWidth && (_tempMutiMenu.style.left = _tempMaxWidth + "px");

            $("body").find(".LexinMutiMenus li").click(function () {
                var _tempDom = $(this);
                var _tempData = _tempDom.attr("data");
                if (_MenuCallback && _tempData) {
                    _MenuCallback(_tempData);
                }
                $("body").find(".LexinMutiMenus").remove();//單擊完後移除
                var event = arguments.callee.caller.arguments[0] || window.event;
                event.stopPropagation();    //  阻止事件冒泡
            });
            $("body").find(".LexinMutiMenu_Fade").click(function () {
                $("body").find(".LexinMutiMenus").remove();
                var event = arguments.callee.caller.arguments[0] || window.event;
                event.stopPropagation();    //  阻止事件冒泡
            });

            //相對位置轉化為絕對位置
            var getOffset = {
                top: function (obj) {
                    return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
                },
                left: function (obj) {
                    return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
                }
            };

            $("body").find(".Menus_Items").mouseover(function () {
                var _tempDom= $(this);
                _tempDom.addClass("active");
                if (!_tempDom.hasClass("Menus_Items_Sub"))
                {
                    _tempDom.siblings(".Menus_Items_Sub").find("ul").hide();
                    return;
                }
                clearTimeout(_tempHideTimer);
                _tempShowTimer = setTimeout(function () {
                    //_tempDom兄弟元素的UL全部隱藏
                    _tempDom.siblings(".Menus_Items_Sub").find("ul").hide();
                    if (_tempDom.find("ul").length > 0) {
                        var _tempMutiMenu = _tempDom.find("ul")[0];
                        _tempMutiMenu.style.display = "block";
                        _tempMutiMenu.style.top = _tempDom[0].offsetTop + "px";
                        _tempMutiMenu.style.left = _tempDom[0].offsetWidth + "px";

                        //最大显示范围
                        _tempMaxWidth = _tempClientWidth - _tempMutiMenu.offsetWidth;
                        _tempMaxHeight = _tempClientHeight - _tempMutiMenu.offsetHeight;

                        //防止溢出,將左邊距向前偏移自己的寬度,將上邊距向上偏移自己的高度-當前的高度
                        _tempMaxWidth < getOffset.left(_tempMutiMenu) && (_tempMutiMenu.style.left = -_tempMutiMenu.clientWidth + "px");
                        _tempMaxHeight < getOffset.top(_tempMutiMenu) && (_tempMutiMenu.style.top = -_tempMutiMenu.clientHeight + _tempDom[0].offsetTop + _tempDom[0].clientHeight + "px")
                    }
                }, 300);
            });
            $("body").find(".Menus_Items").mouseout(function () {
                var _tempDom = $(this);
                _tempDom.removeClass("active");               
                //clearTimeout(_tempShowTimer);
                //_tempHideTimer = setTimeout(function () {
                //    //_tempDom.find("ul").hide();
                //    console.log(_tempDom.attr("data"));
                //}, 300);
                
            });

        }

    }
})()

.LexinMutiMenus .LexinMutiMenu_Fade{
z-index: 9997;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgb(211, 211, 211);
opacity: 0;
}
.LexinMutiMenus .LexinMutiMenu {
z-index: 9998;
position: absolute;
}
.LexinMutiMenus .LexinMutiMenu ul {
float: left;
border: 1px solid #979797;
background: #f1f1f1;
padding: 2px;
box-shadow: 2px 2px 2px rgba(0,0,0,.6);
list-style-type: none;
}
.LexinMutiMenus .LexinMutiMenu  ul li {
border: 1px solid;
border-color:transparent;
height: 24px;
cursor: pointer;
line-height: 24px;
white-space: nowrap;
}
    .LexinMutiMenus .LexinMutiMenu ul li .Menus_text {
    display:inline-block;
    padding-left:5px;
    text-align:left;
    width: calc(100% - 45px);
    margin-right: 10px;
    }
.LexinMutiMenus .LexinMutiMenu ul li .Menu_right {
    width:20px;
     display:inline-block;    
}
.LexinMutiMenus .LexinMutiMenu ul li .Menu_left {
    width:20px;
     display:inline-block;
      border-right:1px dotted;
}
.LexinMutiMenus .LexinMutiMenu ul li.Menus_Items_Sub>.Menu_right:before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f105";
padding-right:2px;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu  ul li.active {
border-radius: 3px;
border: 1px solid #aecff7;
height: 24px;
cursor: pointer;
line-height: 24px;
}
.LexinMutiMenus .LexinMutiMenu  ul ul {
display: none;
position: absolute;
}

.LexinMutiMenus .LexinMutiMenu ul li .folder::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f07c";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .tag::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f02b";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .read::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f2b6";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .unread::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f0e0";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .download::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f019";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .send::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f1d8";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .reply::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f3e5";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .reply_all::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f122";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .forward::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f064";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .top::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f062";
color:#f39304;
font-style: normal;
}
.LexinMutiMenus .LexinMutiMenu ul li .trash::before{
font-size: 16px;
font-weight: 900;
font-family: Font Awesome\ 5 Free;
content: "\f1f8";
color:#f39304;
font-style: normal;
}