css3与html5实现响应式导航菜单(导航栏)效果分享


Posted in HTML / CSS onFebruary 12, 2014

此方法可以应用到有特别多的链接菜单项目中,特别在移动项目中,它可以将所有菜单转换成一个按钮式的下拉菜单。

HTML

示例中有一个导航菜单的html结构,元素<nav>用来定位导航菜单,.current表示当前活动的导航项。
 

复制代码
代码如下:

<ul>
<li class="current"><a href="#">首页</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>

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时,我们把<nav>设置成relative相对定位,把<ul>设置成absolute绝对定位,并且display:none隐藏所有li元素,这个时候导航菜单变成一个固定大小的按钮。当鼠标滑向nav元素时,菜单下拉展开,设置所有li的样式display: block,具体请看代码:
 
 

复制代码
代码如下:

@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
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;
}
}

HTML / CSS 相关文章推荐
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 #HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 #HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 #HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 #HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 #HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 #HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 #HTML / CSS
You might like
精通php的十大要点(上)
2009/02/04 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
JS Timing
2007/04/21 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python修改注册表终止360进程实例
2014/10/13 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python实现壁纸下载与轮换
2020/10/19 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
日期和时间问题
2015/01/04 面试题
运动会口号16字
2014/06/07 职场文书
2014年检验科工作总结
2014/11/22 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
学校运动会简讯
2015/07/20 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python