jQuery响应菜单插件PgwMenu使用例子

时间：2022-06-25 17:30:35 编辑：袖梨来源：一聚教程网

jQuery响应菜单插件PgwMenu

pgwmenu是一个轻量级的jQuery响应菜单，充分响应导航菜单(桌面和移动设备)，CSS自定义皮肤，SEO菜单优化。
使用方法：

css" href="pgwmenu.min.css"/>

HTML部分

首页

个人作品

前端开发

学习笔记

有感杂谈

小站主题

关于我

JS调用

例子、css3与html5实现响应式导航菜单

HTML

示例中有一个导航菜单的html结构，元素

用来定位导航菜单，.current表示当前活动的导航项。

代码如下:

首页

客户服务

产品展示

经典案例

联系我们

CSS
首先我们要给菜单nav相对定位，我们在.nav li中使用display: inline-block代替float:left，这样一来我们可以使用text-align 来对nav菜单进行左中右对齐设置。

代码如下:

.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #d0d0d0;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
使用text-align对菜单进行右对齐和居中对齐。

/* right nav */
.nav.right ul {
text-align: right;
}

/* center nav */
.nav.center ul {
text-align: center;
}
接下来我们来做响应式设计，我们使用CSS3的media query来实现。当浏览器窗口宽度小于600px时，我们把

设置成relative相对定位，把

@media screen and (max-) {
.nav {
position: relative;
min-
}
.nav ul {

padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(images/menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all items */
margin: 0;
}
.nav .current {
display: block; /* show only currentitem */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}

/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/check.png) no-repeat 10px 7px;
}

/* right nav */
.nav.right ul {
left: auto;
right: 0;
}

/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}

推荐专题

最新下载

热门教程

jQuery响应菜单插件PgwMenu使用例子

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程