效果图如下：

查看演示源码下载

超文本标记语言代码：

h1jQuery/Zepto响应式菜单PgwMenu演示/h1 p class='dowebok-explain '请缩小/放大浏览器窗口宽度查看效果/p h2深色样式（默认)/H2 ul class=' pgwMenu ' lia class=' selected ' href='//www .JB 51。' net/'首页/a/li lia href='//www.jb51.net/'代码/a/li lia href='//www.jb51.net/'素材/a/li lia href='//www.jb51.net/'模板/a/li lia href='javascript: '关于/a/li lia href='javascript: '服务/a/li lia href='//www.jb51.net/'联系/a/li /ul h2浅色样式（默认)/H2 ul class=' pgwMenu light ' lia class=' selected ' href='//www .JB 51。' net/'首页/a/li lia href='//www.jb51.net/'代码/a/li lia href='//www.jb51.net/'素材/a/li lia href='//www.jb51.net/'模板/a/li lia href='javascript: '关于/a/li lia href='javascript: '服务/a/li lia href='//www.jb51.net/'联系/a/li /ul h2自定义样式/H2 ul class=' pgwmenccustom ' lia class=' selected ' href='//www .JB 51。' net/'首页/a/li lia href='//www.jb51.net/'代码/a/li lia href='//www.jb51.net/'素材/a/li lia href='//www.jb51.net/'模板/a/li lia href='javascript: '关于/a/li lia href='javascript: '服务/a/li lia href='//www.jb51.net/'联系/a/li /ulJs代码

$(function () { $(').pgwMenu ').pgwMenu({ dropDownLabel: '菜单，viewMoreLabel: '更多span class=' icon '/span ' })；$('.pgwmenccustom’).pgwMenu({ main class name : ' pgwmenccustom '，dropDownLabel: '菜单，viewMoreLabel: '更多span class=' icon '/span ' })；});以上内容就是本文给大家介绍JQuery自适应窗口大小导航菜单的全部内容，希望大家喜欢。