CSS3+Js实现响应式导航条

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

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

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

代码如下:

<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",这样方便样式表里的处理:

代码如下:

<!DOCTYPE html>
<!--[if lt IE 9]><html class="ie6-8"><![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中不同状态下的效果如下图:






CSS3+Js实现响应式导航条

CSS3+Js实现响应式导航条

CSS3+Js实现响应式导航条

但对于第三幅图来说,我们还想要一个效果,那就是点击右下角的图标时菜单可以收起,那么这该怎么做呢?这可以用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实现响应式导航条
css3-js-response-nav(jb51.net).rar

时间: 2014-05-17

几种响应式文字详解

讲真,其实我也不知道该如何为此篇开头, 因为响应式文字需不需要做其实我也没有深入探究过, 但在学习其他网站的过程中,我发现了一些比较新奇的做法,所以想试着梳理一下, 为何会出现这种有些奇怪,可能实则非常奇妙的解决方案. 如果理解有偏差的地方,还望大佬们不吝赐教. 简单来说,响应式是为了让网页在各种显示设备上都有不错的浏览体验, 无论是 @media 将元素换行,后台获取 userAgent 返回不同页面,利用 viewport 限定视图,还是利用根元素 html 属性来计算大小等, 他们都能实现

jQuery Deferred和Promise创建响应式应用程序详细介绍

这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首次亮相于 流行的 JavaScript 库 jQuery(已经是1.5版本的事情了). Deferred 提供了一个抽象的非阻塞的解决方案(如 Ajax 请求的响应),它创建一个 "promise" 对象,其目的是在未来某个时间点返回一个响应.如果您之前没有接触过 "promis

Bootstrap实现响应式导航栏效果

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

CSS图片响应式 垂直水平居中

我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下. 点击此处下载源码 效果展示: 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级

原生JS实现响应式瀑布流布局

原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper

jquery SweetAlert插件实现响应式提示框

jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互体验度非常好,大家都用微信支付.支付宝等完成用户体验度非常的不错.本插件至少要支持IE9+.使用方式也非常的简单.粗暴,很符合大众的jquery插件使用方法. 先给大家演示效果: 在线预览    源码下载 代码如下: <h1>Sweet Alert</h1> <h2>A beautiful replacement for JavaScript's "Alert"</h2>

Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1)  .环境配置 2)  .提取页面 3).动态生成菜单(无限级别树) 2.系统环境配置  项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读)  运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012  解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.M

jQuery插件slick实现响应式移动端幻灯片图片切换特效

jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

使用Chart.js图表库制作漂亮的响应式表单

入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的

8款非常棒的响应式jQuery 幻灯片插件推荐

这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件.该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片. 在线预览     源码下载 使用方法 在页面中引入jquery和slider.js文件和font-awesome字体图标文件. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-

超棒的响应式布局jQuery插件Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage和Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元

20个非常棒的 jQuery 幻灯片插件和教程分享

滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天这篇文章就与大家分享20个非常棒的 jQuery 幻灯片插件和教程. > Slider Gallery with jQuery Create an Image Rotator with Description (CSS/jQuery) Create a Slick and Accessible Slideshow Using jQuery Simple JQuery Image Slide Sho

jquery幻灯片插件bxslider样式改进实例

本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考.具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样式如下: 改造后的样式如下: 第一步:引入bxslider 复制代码 代码如下: <!-- jQuery library (served from Google) -->  <script

20款非常优秀的 jQuery 工具提示插件 推荐

因此,今天这篇文章向大家推荐的20款优秀的 jQuery Tooltip 插件就是用于帮助你制作漂亮的工具提示效果. 1. Dynamic tooltip 2. jGrowl 3. jQuery Horizontal Tooltips Menu Tutorials 4. Coda Popup Bubble 5. The Tooltip 6. TipTip 7. (mb)Tooltip 8. vTip 9. Awesomeness 10. jQuery Ajax Tooltip 11. Digg-

非常棒的10款jQuery 幻灯片插件

Easy Slider(在线演示) Horinaja Slide Show Plugin For jQuery(在线演示) Creating Your Own Slider Plugin(在线演示) Slick Accessible Slideshow(在线演示) Sliding Boxes and Captions with jQuery Tutorial(在线演示) Supersized(在线演示) Blog SlideShow(在线演示) EOGallery(在线演示) Smart Gal

25个优雅的jQuery Tooltip插件推荐

下面我们为你推荐 25 个最好的工具提示插件: 1. jqTooltip jqTooltip 2. Pop! Simple Pop Menus with jQuery Pop! Simple Pop Menus with jQuery 3. jGrowl jGrowl 4. ProtoTip 2 ProtoTip 2 5. BetterTip BetterTip 6. Tipsy – Facebook-Style Tooltip Plugin for jQuery Tipsy – Faceboo

jQuery 幻灯片插件(带缩略图功能)

应朋友的邀请,帮他公司做一个幻灯播放效果,效果如下: 缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度.假设当前正播放到第0张图片,则排列情况如下: 0 1 4 2 3 按逆时针方向转一张图后的排列情况如下: 4 0 3 1 2 这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下: 本人考虑将缩略图轮转与大图的滚进分开两部分,缩略图轮转做为一个单独的jQuery插件,由此插件中的事件带动大图的滚进.下面先

jquery.gridrotator实现响应式图片展示画廊效果

jquery.gridrotator是一款非常实用的响应式图片展示画廊插件.这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片.共有6种效果. HTML结构: HTML结构非常简单. <div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow"> <ul> <li><a href="#"><img sr