今天制作了一个响应式导航条，能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式，这里主要用到的就是css3的media query。具体可以查看浅谈响应式布局这篇文章，这里就不花费大量的篇幅介绍了，主要看一下这个导航条该怎么做。
另外需要提到的是，ie6-ie8是不支持css3的media query的，因此对于ie6-ie8我们需要特殊处理，就让他们保持默认样式，这对于布局及样式上都要考虑到这一点。
首先看一下布局这一块，html代码如下：
html部分另外还要有一个条件注释,当浏览器是ie6-8时给html标签挂载个类"ie6-8"，这样方便样式表里的处理：
下面就是样式控制了，先对整体样式及ie6-ie8进行处理
ok，下面就用到media query了。
当屏幕宽度大于1000px时：
当屏幕宽度在640px到1000px之间时：
当屏幕宽度小于640px时：
ok，对于布局及样式控制就完成了，效果也有了，3中不同状态下的效果如下图：
 |
但对于第三幅图来说，我们还想要一个效果，那就是点击右下角的图标时菜单可以收起，那么这该怎么做呢？这可以用js实现，当菜单在收起状态时，点击图片菜单可以展开；当菜单在展开状态时，点击图标菜单可以收起，并且还要有动画效果。ok，下面来看一下js，但js这一块就不细说了，贴一下核心代码吧：
这部分代码用来产生动画效果：
ok，这个响应式导航条基本就这样了，附上源码
如对本文有疑问， 点击进行留言回复！！
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo（linear-gradient()）
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
我要评论
网友评论