[代码样式]PgwMenu – jQuery/Zepto响应式菜单

脚本代码
20年9月10日
编辑

简介

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

浏览器兼容


IE8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/pgwmenu.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/pgwmenu.min.js"></script>

2、HTML

<ul class="pgwMenu">
    <li><a class="selected" href="https://www.dowebok.com/" rel="external nofollow" >首页</a></li>
    <li><a href="https://www.dowebok.com/code" rel="external nofollow" >代码</a></li>
    <li><a href="https://www.dowebok.com/material" rel="external nofollow" >素材</a></li>
    <li><a href="https://www.dowebok.com/template" rel="external nofollow" >模板</a></li>
    <li><a href="https://www.dowebok.com/javascript:" rel="external nofollow"  rel="external nofollow" >关于</a></li>
    <li><a href="https://www.dowebok.com/javascript:" rel="external nofollow"  rel="external nofollow" >服务</a></li>
    <li><a href="https://www.dowebok.com/contact" rel="external nofollow" >联系</a></li>
</ul>

PgwMenu 内置了两套样式：深色（黑色）和浅色（灰色），如过选择深色，代码就如上面一样；如果选择浅色，需要加上 class：light，如：

<ul class="pgwMenu light">
    ...
</ul>

3、JavaScript

$(function() {
    $('.pgwMenu').pgwMenu({
        dropDownLabel: '菜单',
        viewMoreLabel: '更多<span class="icon"></span>'
    });
});

配置

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