dowebok

PgwMenu – jQuery/Zepto响应式菜单

分类:代码 日期: 点击(13,575) 评论(0)

PgwMenu - jQuery / Zepto响应式菜单

演 示 下 载

简介

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

浏览器兼容

IE Chrome Firefox Opera Safari
IE8+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="css/pgwmenu.css">
<script src="js/jquery.min.js"></script>
<script src="js/pgwmenu.min.js"></script>

2、HTML

<ul class="pgwMenu">
    <li><a class="selected" href="http://www.dowebok.com/">首页</a></li>
    <li><a href="http://www.dowebok.com/code">代码</a></li>
    <li><a href="http://www.dowebok.com/material">素材</a></li>
    <li><a href="http://www.dowebok.com/template">模板</a></li>
    <li><a href="javascript:">关于</a></li>
    <li><a href="javascript:">服务</a></li>
    <li><a href="http://www.dowebok.com/contact">联系</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 小于多少宽度时显示“更多”按钮

演 示 下 载

GitHub 地址:https://github.com/Pagawa/PgwMenu

标签:

相关文章