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 相关文章推荐
html5+css3气泡组件的实现
Nov 21 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 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 URL验证正则表达式
2011/07/19 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
深入浅析python定时杀进程
2016/06/06 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python反射的用法实例分析
2018/02/11 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
使用python求解二次规划的问题
2020/02/29 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Python是怎样处理json模块的
2020/07/16 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
办公室助理岗位职责
2013/12/25 职场文书
安全大检查反思材料
2014/01/31 职场文书
学习十八大报告感言
2014/02/28 职场文书
医德医风演讲稿
2014/05/20 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书