如何使用js+css3制作响应式导航条实例代码详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何使用js+css3制作响应式导航条实例代码详解,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4252字,纯文字阅读大概需要7分钟。
内容图文
![如何使用js+css3制作响应式导航条实例代码详解](/upload/InfoBanner/zyjiaocheng/414/978bece5e2364eaa9f1208878baa36c9.jpg)
另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点。
首先看一下布局这一块,html代码如下:
<p class="navBar"> <p 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]--> </p> </p>
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,对于布局及样式控制就完成了
下面来看一下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); }
以上就是如何使用js+css3制作响应式导航条实例代码详解的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何使用js+css3制作响应式导航条实例代码详解全部内容,希望文章能够帮你解决如何使用js+css3制作响应式导航条实例代码详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。