注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery完全响应菜单插件PgwMenu

菜单 fishcity 1610浏览

jQuery完全响应菜单插件PgwMenu

PgwMenu是一款基于jquery的多功能完全响应式菜单,适用于PC端和移动端,它可以完全的自定义CSS样式,可做横向菜单也可以做垂直菜单,还适用于SEO,且文件小于2KB,不得不说这是一款非常棒的菜单插件。

使用方法 

引入核心文件

<link rel="stylesheet" type="text/css" href="pgwmenu.min.css"/>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="pgwmenu.min.js"></script>

创建html代码,创立菜单,只需添加ul和li标签就可以了

<ul class="pgwMenu">
	<li><a href="mypage.php">Link 1</a></li>
	<li><a href="/myfolder">Link 2</a></li>
	<li><a href="http://www.jqcool.net" target="_blank">Link 3</a></li>
</ul>

显示当时选中的菜单项,必须给链接添加CSS样式类"selected"

<li><a href="mypage.php" class="selected">Link 1</a></li>

写入JS初始化插件

$('.pgwMenu').pgwMenu();

下拉标签(dropDownLabel)

下拉标签可以是文本也可以是一个ICON图标

$('.pgwMenu').pgwMenu({
        dropDownLabel: 'Menu'
});

你可以从以下方中式选择适用的方式来填充标签

dropDownLabel: 'Menu' //用文本替代了默认的ICON 
或
dropDownLabel: '<span class="icon"></span>' // 当黑色主题时显示白色的ICON,白色主题时显示黑色ICON
或
dropDownLabel: '<span class="white"></span>' // 一直显示白色ICON
或
dropDownLabel: '<span class="black"></span>' // 一直显示黑色ICON

主类名(mainClassName)

如果你不想使用默认的CSS样式类"pgwMenu",那你必须把自定义的类样式初始化,当然你也可以直接修改默认样式来达到要求

$('.pgwMenuCustom').pgwMenu({
	mainClassName: 'pgwMenuCustom'
});

风格

插件中的CSS带有两个主题风格,你可以通过设定class来实现

黑色主题

<ul class="pgwMenu">
    [...]
</ul>

白色主题

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

转载请注明:jQ酷 » jQuery完全响应菜单插件PgwMenu

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。