当前位置:  编程技术>WEB前端

CSS3+Js实现响应式导航条

    来源: 互联网  发布时间:2014-10-07

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

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

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

首先看一下布局这一块,html代码如下:

代码如下:

<div >
    <div >
        <ul id="menu">
            <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>
            <li><a href="#">公开课</a></li>
        </ul>
        <p >
            <a href="#">钢铁侠3</a>
            <a href="#">中国合伙人</a>
            <a href="#">盛夏晚晴天</a>
            <a href="#">陆贞传奇</a>
        </p>
        <!--判断浏览器是否是IE9,IE10或者是非IE浏览器-->
        <!--[if (gt IE 8) | !(IE)]><!-->
        <h1 id="title">
            <a href="#">风驰网</a>
            <span id="btn"></span>
        </h1>
        <!--<![endif]-->
    </div>
</div>

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

代码如下:

<!DOCTYPE html>
<!--[if lt IE 9]><html ><![endif]-->
<html>
...

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

代码如下:

* {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时:

代码如下:

@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之间时:

代码如下:

@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时:

代码如下:

@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这一块就不细说了,贴一下核心代码吧:

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

代码如下:

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,这个响应式导航条基本就这样了,附上源码

css3-js-response-nav().rar


    
 
 

您可能感兴趣的文章:

  • 响应式 CSS 框架 TukTuk
  • 响应式HTML5/CSS3的框架 ResponsiveAeon
  • 响应式 CSS 和 SASS 框架 Sculpt
  • 响应 CSS 框架 快切
  • CSS3+Js实现响应式导航条
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • CSS3实现文字动画 Textillate.js
  • php 压缩多个CSS文件的实现代码
  • 基于HTML5&CSS3实现的Slideshow Slider.js
  • CSS实现简单的图片防盗链代码
  • 用css来控制图片大小显示的实现方法与代码
  • css实现行间距效果
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • CSS实现光滑圆角效果
  • 用css实现隐藏文本框
  • div+css如何实现页脚的置底
  • 用css实现的灰度/原色连接效果
  • css创意ul+li实现的细线表格实现代码
  • 用css滤镜实现的文字描边效果的代码
  • CSS opacity - 实现图片半透明效果的代码
  • 纯CSS实现上下左右都居中的代码
  • 用css实现图片垂直居中的使用技巧
  • jquery与css实现返回顶部的效果代码
  • 使用CSS不用程序实现文字自动截断 用省略号代替
  • 用css实现的带阴影的表格效果的代码
  •  
    本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CSS网页布局入门教程9:用CSS设计网站导航——横向导航
  • xhtml+css制作不规则导航
  • 快速制作CSS导航菜单教
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
  • 纯CSS实现标签导航制作
  • CSS网页布局入门教程12:纵向导航菜单
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • 利用jquery动画特效和css打造的侧边弹出垂直导航
  • 用CSS开发时髦的导航栏图例教程
  • 比较漂亮的一个导航条的效果DIV+CSS
  • 用CSS开发时髦的导航栏第二篇
  • CSS网页布局入门教程10:带当前标识的标签式横向导航
  • DIV+CSS 简单的导航条
  • CSS仿淘宝首页导航条布局效果
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号