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,js)
Dec 12 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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重写更新版[需php 5.30以上]
2010/04/25 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP7多线程搭建教程
2017/04/21 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
python生成式的send()方法(详解)
2017/05/08 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python编写简单端口扫描器
2019/09/04 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
三星美国官网:Samsung美国
2017/02/06 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
医务工作者先进事迹材料
2014/01/26 职场文书
公司合作意向书范文
2014/07/30 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Java中的Kotlin 内部类原理
2022/06/16 Java/Android