pgwmenu.min.js 是一款基于 jQuery / Zepto 的响应式菜单插件-BFW插件库

pgwmenu.min.js 是一款基于 jQuery / Zepto 的响应式菜单插件

pgwmenu.min.js 是一款基于 jQuery / Zepto 的响应式菜单插件，兼容 PC 及移动设备，符合 SEO 标准，轻盈小巧，Gzip 压缩后仅 2.5KB，同时，你可以完全自定义样式风格。

使用方式：

第一步引入bfwone

第二步use插件及css

第三步配置

属性/方法	类型	默认值	说明
mainClassName	字符串	pgwMenu	绑定 class
dropDownLabel	字符串	<span class=”icon”></span>	“下拉”按钮文本
viewMoreEnabled	布尔值	true	是否显示“更多”按钮
viewMoreLabel	字符串	View more <span class=”icon”></span>	“更多”按钮的文本
viewMoreMaxWidth	整数	480	小于多少宽度时显示“更多”按钮

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["pgwmenu.min", "pgwmenu"], function() {
                $('.pgwMenu').pgwMenu({
                    dropDownLabel: '菜单',
                    viewMoreLabel: '更多<span class="icon"></span>'
                });

                $('.pgwMenuCustom').pgwMenu({
                    mainClassName: 'pgwMenuCustom',
                    dropDownLabel: '菜单',
                    viewMoreLabel: '更多<span class="icon"></span>'
                });
            });
        });
    </script>
    <style>
        h1 {
            padding: 30px 0;
            font: 32px "Microsoft Yahei";
            text-align: center;
        }
        h2 {
            margin-top: 50px;
            font: 24px "Microsoft Yahei";
        }
        body {
            font-size: 14px;
        }
        .bfwcont-explain {
            margin-top: 20px;
            font-size: 14px;
            text-align: center;
            color: #f50;
        }

        .pgwMenu a {
            padding: 0 30px;
        }

        /* 自定义样式 */
        .pgwMenuCustom {
            background: #f1941c;
            height: 40px;
            position: relative;
            list-style: none
        }
        .pgwMenuCustom ul {
            list-style: none;
            white-space: nowrap;
            margin: 0;
            padding: 0
        }
        .pgwMenuCustom .pm-links.mobile, .pgwMenuCustom .pm-viewMore>ul {
            background: #f1941c;
            box-shadow: 2px 2px 4px #777;
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 1000
        }
        .pgwMenuCustom .pm-links.mobile li, .pgwMenuCustom .pm-viewMore>ul>li {
            display: block;
            clear: both;
            width: 175px
        }
        .pgwMenuCustom li {
            float: left
        }
        .pgwMenuCustom a {
            display: block;
            color: #fff;
            line-height: 40px;
            padding: 0 30px;
            text-decoration: none
        }
        .pgwMenuCustom a.selected {
            background: #e5601d
        }
        .pgwMenuCustom li a:hover {
            background: #e86f2e;
            text-decoration: none
        }
        .pgwMenuCustom .pm-dropDown, .pgwMenuCustom .pm-viewMore, .pgwMenuCustom .pm-viewMore>ul {
            display: none
        }
        .pgwMenuCustom .pm-dropDown a {
            display: inline-block;
            background: #e86f2e
        }
        .pgwMenuCustom .pm-dropDown a.active, .pgwMenuCustom .pm-viewMore a.active {
            background: #e5601d
        }
        .pgwMenuCustom .pm-dropDown span.icon, .pgwMenuCustom .pm-dropDown span.black {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvgAADr4B6kKxwAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABpSURBVEhL7ZPLCcAwDEM9jefI/ks1Hyj2QbiGSLcKHggl8sEktjTc/WGyZxo6YKAbrFzFoav3/hdhmsrlijBN5XJFmKZyuSJMU7lcsfV/kIN0FRJgyACGDGDIAIYMpK8CHt6iG6xZhY0JIJ+6AHGbUFsAAAAASUVORK5CYII=) no-repeat;
            display: block;
            height: 22px;
            width: 22px;
            margin: 9px 5px
        }
        .pgwMenuCustom .pm-dropDown span.white {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMDvo9WkAAABKSURBVEhL7ZOxDQAwCMN6O4/T0tmjsxHJDB4yROJ0dz3s1BRHEi2OTREBpQFKA5QGKA3m7IP8RKeIgNIApQFKA5QGc/ZBfkJTdF0oUafLBAFNbAAAAABJRU5ErkJggg==) no-repeat;
            display: block;
            height: 22px;
            width: 22px;
            margin: 9px 5px
        }
        .pgwMenuCustom .pm-viewMore {
            display: none;
            position: relative
        }
        .pgwMenuCustom .pm-viewMore>a {
            display: inline-block
        }
        .pgwMenuCustom .pm-viewMore>ul {
            left: auto;
            right: 0
        }
        .pgwMenuCustom .pm-viewMore li {
            float: none
        }
        .pgwMenuCustom .pm-viewMore span.icon, .pgwMenuCustom .pm-viewMore span.white {
            border-color: #fff transparent;
            border-style: solid;
            border-width: 8px 6px 0;
            margin-left: 3px;
            display: inline-block
        }
        .pgwMenuCustom .pm-viewMore span.black {
            border-color: #000 transparent;
            border-style: solid;
            border-width: 8px 6px 0;
            margin-left: 3px;
            display: inline-block
        }
    </style>

</head>
<body>
    <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1>
    <p class="bfwcont-explain">
        请缩小/放大浏览器窗口宽度查看效果
    </p>

    <h2>深色样式（默认）</h2>
    <ul class="pgwMenu">
        <li><a class="selected" href="javascript:">首页</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>

        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>

    </ul>


    <h2>浅色样式（默认）</h2>
    <ul class="pgwMenu light">
        <li><a class="selected" href="javascript:">首页</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>

        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
    </ul>

    <h2>自定义样式</h2>
    <ul class="pgwMenuCustom">
        <li><a class="selected" href="javascript:">首页</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>

        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
        <li><a href="javascript:">服务</a></li>
        <li><a href="javascript:">关于</a></li>
    </ul>



</body>
</html>