最近空一點矛绘，利用空余的時間把工作中常用的一些代碼整理出來辙浑，方便以后在一個統(tǒng)一的地方查找壳咕，自己也好總結(jié)一下，加深印象汗盘，也可以查漏補缺。

floatmenu 主要用來展示前端切的頁面询一，方便后臺查看衡未，好套數(shù)據(jù)，直接看圖吧家凯。

floatmenu.jpeg

下面是代碼缓醋，每增加一個頁面，只要加一句下面的代碼就可以了绊诲。

'<li><a href="name.html">頁面名稱</a></li>' +

下面是完整的代碼送粱，在項目中添加一個floatmenu.js的文件，然后在所有需要展示這個菜單的頁面引入這個js文件掂之，像平常引入其他js文件一樣引入抗俄。
<script src="js/floatmenu.js"></script>

(function (window, document) {
    var styles = '.fe-floatmenu{position: fixed;top:10px;padding:5px;background: #fff;border:1px solid #919191;z-index:100000000;width:150px;}.fe-floatmenu>ul{display: block;}.fe-floatmenu.show{width:200px;padding:2px;}.fe-floatmenu.show>ul{display: block;}.fe-floatmenu.show>a{text-align:center;}.fe-floatmenu a{color:#434343;display: block;height:18px;line-height:18px;}.fe-floatmenu li{border:1px solid #fff;padding:2px 6px;margin-bottom:-1px;background: #f0f0f0;}.fe-floatmenu .close{display:block;position:absolute;right:2px;top:2px;color:#00a1d7;}.fe-floatmenu a:hover{color:#00a1d7;}.fe-floatmenu>ul>li>ul{display: block;padding-left:10px;}.fe-floatmenu>ul>li>ul>li>ul{display: block;padding-left:10px;}.fe-floatmenu>ul>li>ul>li>ul>li>ul{display: none;padding-left:10px;}.fe-floatmenu .hassubmenu>a{position: relative;padding-bottom:3px;}.fe-floatmenu .hassubmenu>a:after{content:"+";position: absolute;right:0;top:0;}.fe-floatmenu .hassubmenu.show>ul{display: block;}.fe-floatmenu .hassubmenu.show>a:after{content:"-";}';

    var html = '<div class="fe-floatmenu">' +
        '<a href="javascript:;">頁面導(dǎo)航</a>' + '<a class="close" href="javascript:;">關(guān)閉</a>' +
        '<ul>' +
        '<li><a href="fair.html">創(chuàng)交會</a></li>' +
        '<li><a href="consult.html">咨詢管理</a></li>' +
        '<li><a href="waiting.html">敬請期待</a></li>' +
        '<li><a href="index.html">首頁</a></li>' +
        '<li><a href="all-providers.html">全部服務(wù)商</a></li>' +
        '</ul>' +
        '</div>';
    var styleWrap = document.createElement("style");

    styleWrap.innerHTML = styles;
    document.body.appendChild(styleWrap);

    var htmlWrap = document.createElement("div");
    htmlWrap.innerHTML = html;
    document.body.appendChild(htmlWrap);

    var $ = document.querySelectorAll.bind(document);

    Element.prototype.on = Element.prototype.addEventListener;

    NodeList.prototype.on = function (event, fn) {
        [].forEach.call(this, function (el) {
            el.on(event, fn);
        });
        return this;
    };

    var css = function (t, s) {
        s = document.createElement('style');
        s.innerText = t;
        document.body.appendChild(s);
    };
    $(".fe-floatmenu>a").on("click", function (e) {
        $("a.close")[0].style.display = "block";
        $(".fe-floatmenu ul")[0].style.display = "block";
        this.parentNode.classList.add('show');
    });

    $(".fe-floatmenu").on("mouseleave", function (e) {
        // this.classList.remove('show');
    });
    $(".close").on("click", function (e) {
        $("a.close")[0].style.display = "none";
        $(".fe-floatmenu ul")[0].style.display = "none";
        $(".fe-floatmenu")[0].classList.remove('show');
    });
    $(".fe-floatmenu .hassubmenu").on("click", function (e) {
        e.stopPropagation();
        var obj = this.children[1];
        var display = window.getComputedStyle(obj).display;
        if (display == "block") {
            this.classList.toggle('show');
        } else if (display == "none") {
            this.classList.toggle('show');
        }
    });
})(window, document);