CSS3 Js实现响应式导航栏

如今，一个响应性的导航栏被制作出来，它可以根据不同的屏幕分辨率或浏览器窗口大小自动改变导航栏的样式。这里主要使用CSS3的媒体查询。你可以详细查看这篇关于响应式布局的文章，这里我就不多花篇幅了，主要看看这个导航栏是怎么做的。另外，ie6-ie8不支持CSS3的Media Query，所以我们对ie6-ie8需要特殊处理，所以让他们保留默认样式，布局和样式都要考虑。先看布局。Html代码如下：复制代码如下： div class=' nav bar ' div class=' nav ' ul id=' menu ' Li class=' current ' a href=' # '主页/a/li lia href='# '电影/a/li lia href='# '电视剧/a/Li lia href='# '动画/a/li lia href='# '综艺节目/a/li lia href='# '纪录片/a/li lia href='# '打开'-判断浏览器是IE9、IE10还是非IE浏览器-！-(if(gt IE 8)|！(IE)】！-h1 class=' title ' id=' title ' a href=' # ' fengchi.com/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 3360 0；padd : 0；}body {font: 14px/22px' '，arial，serif}.nav bar { margin-top : 80px；宽度： 100%；height: 38px背景技术： # 333；}.nav { margin: 0 autoborder: 0px固体# ccc}.nav ul { list-style : none；宽度：自动；}.nav ul li { height: 38px文本对齐：中心；}.阿利导航区块；font-size : 16px；color: # fff文本装饰：无；线高： 39px；}.ie6-8。nav { width: 1000pxheight: 38px}.ie6-8。nav ul li {左侧浮动：}.ie6-8。阿利导航号{ padding: 0 30px 0 30px}.ie6-8。nav ul Li . current { background : # f60；}.ie6-8。nav ul Li :悬停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。导航。热{左侧浮动：左边距left: 20px填充-top : 8px；}.ie6-8。导航。热a { padding: 0 5px 0 5pxfont-size : 12px；color: # fff文本装饰：无；}.ie6-8。导航。hot a:hover { color: # f60文本修饰：下划线；}.ie6-8。导航。title { display: none}好的，接下来将使用媒体查询。

当屏幕宽度大于1000像素时：复制代码代码如下： @媒体屏幕和（最小宽度： 1000px) { .nav { width : 1000 pxheart : 38px }。导航左侧浮动：宽度：自动；} .阿利导航号{ padding: 0 30px 0 30px }。李导航。当前{背景： # f60} .ul Li :悬停a { color: # f60}。nav ul li.current:hover悬停a { color: # fff}。导航热门{左边距： 20px填充-top : 8px；} .导航。热a { padd : 0 5px 0 5px font-size : 12px；color: # fff文本装饰：无；} .导航hot a:hover { color: # f60文本修饰：下划线；} .导航标题{ display: none}}当屏幕宽度在640像素到1000像素之间时：复制代码代码如下： @媒体屏幕和（最小宽度： 640px)和（最大宽度： 1000px) { .nav { width : auto height : 38px }。导航左侧浮动：宽度： 14%;最小宽度： 50px} .李导航。当前{背景： # f60} .ul Li :悬停a { color: # f60}。nav ul li.current:hover悬停a { color: # fff}。导航hot { display:none}。导航标题{ display: none}}当屏幕宽度小于640像素时：复制代码代码如下： @媒体屏幕和（最大宽度： 640px) { .导航条{页边距-top : 0；height: auto背景技术： # 444;} .nav { width : auto height : auto }。nav ul Li { margin-top : 1px；宽度： 100%;最小宽度： 100像素；背景技术： # 333;} .导航ul阿利：活动{背景： # f60} .导航hot { display:none}。导航标题{位置：相对；宽度： 100%;高度： 38px边框-top: 1px实心# 444;背景技术： # 333;文本对齐：中心；字体：普通20px/35px '微软雅黑'，arial，serif字母间距2px}。导航。标题a { color: # f60文本装饰：无；} .导航。标题btn {position:绝对值；right : 10 xtop : 0；宽度： 34px高： 34 xpadding : 2px背景：网址(btn.png)中心中心无重复；光标：指针；} }好的，对于布局及样式控制就完成了，效果也有了，3中不同状态下的效果如下图

但是对于第三张图片，我们也想要一个效果，那就是点击右下角的图标就可以关闭菜单，那么我们该怎么办呢？这可以用js来实现。当菜单处于关闭状态时，点击图片菜单展开。当菜单处于展开状态时，点击图标菜单进行折叠，必须有动画效果。好吧，让我们来看看js，但我们不要详细说明js。请粘贴核心代码：这部分代码用于生成动画效果：复制代码的代码如下： varmove=function (obj，target){ vartimer；clearInterval(计时器)；timer=setInterval(function(){ var speed=(target-obj . offsettop)/3；速度=速度0？数学天花板(速度):数学地板(速度)；if(math . ABS(obj . offsettop-target)4){ clearInterval(定时器)；obj . style . marginTop=target ' px '；} else { obj . style . margin top=obj . offsettop speed ' px '；} }, 30);}好了，这个响应式导航栏基本是这样的，附上源代码。

css3-js-response-nav(jb51.net)。rar