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 相关文章推荐
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php bootstrap实现简单登录
2016/03/08 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
wxPython实现画图板
2020/08/27 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
办理护照介绍信
2014/01/16 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
学校教师安全责任书
2014/07/23 职场文书
初中家长评语和期望
2014/12/26 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
导游词之安徽九华山
2019/09/18 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Python的property属性详细讲解
2022/04/11 Python