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实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
HTML基础详解(下)
Oct 16 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 smarty的预保留变量总结
2008/12/04 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php上传excel表格并获取数据
2017/04/27 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
sails框架的学习指南
2014/12/22 Javascript
理解javascript闭包
2015/12/15 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
解析Python中的二进制位运算符
2015/05/13 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python如何实现递归转非递归
2021/02/25 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
一封普通求职者的求职信
2013/11/20 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
全民健身日活动方案
2014/01/29 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书