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中的calc函数浅析
Jul 10 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html5表单的required属性使用
Jul 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
如何在PHP程序中防止盗链
2008/04/09 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
Prototype使用指南之selector.js
2007/01/10 Javascript
javascript import css实例代码
2008/07/18 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
js new Date()实例测试
2019/10/31 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python3中编码获取网页的实例方法
2020/11/16 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
合同审查法律意见书
2015/06/04 职场文书
论语读书笔记
2015/06/26 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
高一军训口号
2015/12/25 职场文书