今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是CSS3的Media Query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。

另外需要提到的是，ie6-ie8是不支持CSS3的Media Query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。

首先看一下布局这一块，html代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="navBar">
    <div class="nav">
        <ul id="menu">
            <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>
            <li><a href="#">纪录片</a></li>
            <li><a href="#">公开课</a></li>
        </ul>
        <p class="hot">
            <a href="#">钢铁侠3</a>
            <a href="#">中国合伙人</a>
            <a href="#">盛夏晚晴天</a>
            <a href="#">陆贞传奇</a>
        </p>
        <!--判断浏览器是否是IE9,IE10或者是非IE浏览器-->
        <!--[if (gt IE 8) | !(IE)]><!-->
        <h1 class="title" id="title">
            <a href="#">风驰网</a>
            <span class="btn" id="btn"></span>
        </h1>
        <!--<![endif]-->
    </div>
</div>

html部分另外还要有一个条件注释,当浏览器是ie6-8时给html标签挂载个类"ie6-8"，这样方便样式表里的处理：

1
2
3
4
<!DOCTYPE html>
<!--[if lt IE 9]><html class="ie6-8"><![endif]-->
<html>
...

下面就是样式控制了，先对整体样式及ie6-ie8进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {margin: 0; padding: 0;}
body {font: 14px/22px "宋体", arial, serif;}
     
.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}
     
.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}
     
.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}
     
.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}
     
.ie6-8 .nav .title {display: none;}

ok，下面就用到Media Query了。

当屏幕宽度大于1000px时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (min-width: 1000px) {
    .nav {width: 1000px; height: 38px;}
         
    .nav ul li {float: left; width: auto;}
    .nav ul li a {padding: 0 30px 0 30px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}
     
    .nav .hot {margin-left: 20px; padding-top: 8px;}
    .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
    .nav .hot a:hover {color: #f60; text-decoration: underline;}
     
    .nav .title {display: none;}
}

当屏幕宽度在640px到1000px之间时：

1
2
3
4
5
6
7
8
9
10
11
12
@media screen and (min-width: 640px) and (max-width: 1000px) {
    .nav {width: auto; height: 38px;}
     
    .nav ul li {float: left; width: 14%; min-width: 50px;}
     
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}
     
    .nav .hot {display:none;}
    .nav .title {display: none;}
}

当屏幕宽度小于640px时：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (max-width: 640px) {
    .navBar {margin-top: 0; height: auto; background: #444;}
    .nav {width: auto; height: auto;}
     
    .nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}
         
    .nav ul li a:active {background: #f60;}
     
    .nav .hot {display:none;}
     
    .nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
    .nav .title a {color: #f60; text-decoration: none;}
    .nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}

ok，对于布局及样式控制就完成了，效果也有了，3中不同状态下的效果如下图：

但对于第三幅图来说，我们还想要一个效果，那就是点击右下角的图标时菜单可以收起，那么这该怎么做呢？这可以用js实现，当菜单在收起状态时，点击图片菜单可以展开；当菜单在展开状态时，点击图标菜单可以收起，并且还要有动画效果。ok，下面来看一下js，但js这一块就不细说了，贴一下核心代码吧：

这部分代码用来产生动画效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var move = function (obj, target) {
    var timer;
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = (target - obj.offsetTop)/3;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (Math.abs(obj.offsetTop - target) < 4) {
            clearInterval(timer);
            obj.style.marginTop = target + "px";
        } else {
            obj.style.marginTop = obj.offsetTop + speed + "px";
        }
    }, 30);
    
}

ok，这个响应式导航条基本就这样了，下面有Demo和源码下载：

Demo 　   Download

CSS3+Js制作的一款响应式导航条的更多相关文章

  1. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  2. bootstrap 响应式导航条模板（含下拉菜单，弹出框）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 一款纯css3实现的响应式导航

    之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览   源码下载 实现的代码. html代码: <di ...

  4. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  5. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  6. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  7. 12款响应式的 jQuery 旋转木马（传送带）插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  8. Restive.js – 轻松让网站变成响应式和自适应

    Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...

  9. 20款响应式的 HTML5 网页模板【免费下载】

    下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...

随机推荐

  1. nslookup返回信息说明

    先看一个示例:   如上图,我们把输出结果分成三部分,下面分别来描述:   第一部分: 这里是我们本机的DNS服务器信息. 客户机先到主DNS Server进行连接查询,结果发现异常,连接失败,于是出 ...

  2. c++ 小知识总结 .xml

    pre{ line-height:1; color:#800080; background-color:#d2c39b; font-size:16px;}.sysFunc{color:#627cf6; ...

  3. 使用arm开发板搭建无线mesh网络（二）

    上篇博文介绍了无线mesh网络和adhoc网络的区别,这篇文章将介绍无线mesh网络的骨干网节点的组建过程.首先需要介绍下骨干网节点的设计方案:每个骨干网节点都是由一块友善之臂的tiny6410 ar ...

  4. .net 数据库连接池超时问题

    一.数据库Connection Pool 连接池是什么 每当程序需要读写数据库的时候.Connection.Open()会使用ConnectionString连接到数据库,数据库会为程序建立 一个连接 ...

  5. Collection Operators

    [Collection Operators] Collection operators are specialized key paths that are passed as the paramet ...

  6. area标签circle/rect/poligon坐标

    <img src="images/02.gif" title="flower" usemap="#mm" /> <map ...

  7. 解决 Unable to load DLL 'OraOps9.dll': 找不到指定的模块。 (Exception from HRESULT: 0x8007007E)

    这个问题网上的答案是把oracle的home文件夹权限变为完全控制,然而并没有好用,还有一种方法是在编写的程序的config文件加入 <runtime> <legacyCorrupt ...

  8. 再看Core Data中PSC陷入死锁的问题

    在<Core Data Programming Guide>文档的Concurrency with Core Data这一章节中提到了“Use Thread Confinement to ...

  9. lght oj 1257 - Farthest Nodes in a Tree (II) (树dp)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1257 跟hdu2196一样,两次dfs //#pragma comment(l ...

  10. Uncaught TypeError: Object #<Object> has no method 'fancybox'

    Uncaught TypeError: Object #<Object> has no method 'fancybox' 2011-10-24 16:51:19|  分类: html|举 ...