图片 3

CSS3+Js实现响应式导航条

明日制作了一个响应式导航条,能够活动随着不相同的荧屏分辨率或浏览器窗口大小的分歧而改换导航条的体裁,这里关键利用的正是CSS3的Media
Query。具体能够查看浅谈响应式布局那篇作品,这里就不开销大批量的篇幅介绍了,主要看一下这么些导航条该如何是好。

4、动漫菜单

其余索要提到的是,ie6-ie8是不帮助CSS3的Media
Query的,由此对于ie6-ie8我们须要特别管理,就让他们保证暗中认可样式,那对于结构及体制上都要思考到那或多或少。

上边大家来兑现如下图所示的动漫菜单。当鼠标移入到菜单上,以卡通的情势现身二级菜单。

第一看一下搭架子这一块,html代码如下:

复制代码 代码如下:div div ul li 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=”#”公开课/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 a href=”#”风驰网/a span /span /h1 !–![endif]–
/div/div

图片 1

html部分其余还要有八个准绳注释,当浏览器是ie6-8时给html标签挂载个类”ie6-8″,这样便于样式表里的拍卖:

html代码:

复制代码 代码如下:!DOCTYPE html!–[if lt
IE 9]html ![endif]–html…

图片 2

上面就是体制调控了,先对全部样式及ie6-ie8实行拍卖

css代码如下:

复制代码 代码如下:* {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;}

html, body, ul, li {padding:0; margin:0;}

ok,上面就用到Media Query了。

body {font:10pt;}

当显示器宽度超越1000px时:

ul,li {list-style-type:none; text-transform:capitalize;}

复制代码 代码如下:@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;}}

.clear {clear:both; *display:inline;/*IE only*/}

当显示器宽度在640px到1000px之间时:

/*menu*/

复制代码 代码如下:@media screen and
(min-width: 640px卡塔尔(قطر‎ and (max-width: 1000pxState of Qatar { .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;}}

#menu {margin:100px auto; display:block; width:1000px; height:34px;}

当荧屏宽度小于640px时:

#nav {display:block;}

复制代码 代码如下:@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;}}

#nav .mainlevel {float:left; background:#3f240e; text-align:center;
display:block;}

ok,对于构造及体制调控就产生了,效果也是有了,3中分裂景色下的机能如下图:

#nav .mainlevel a {color:#fff; text-decoration:none; line-height:34px;
height:34px; text-align:center; padding:0 20px; display:block;
_width:48px;}

但对于第三幅图来讲,我们还想要三个职能,那就是点击右下角的Logo时菜单能够接过,那么那该咋办呢?那足以用js完成,当菜单在收受状态时,点击图片菜单能够拓宽;当菜单在进展状态时,点击Logo菜单能够吸收接纳,並且还要有动漫效果。ok,下边来看一下js,但js这一块就不细说了,贴一下骨干代码吧:

#nav .mainlevel a:hover {color:#3f240e; text-decoration:none;
background:#678900 url(images/slide-pannel_14.png) 0 0 repeat-x;}

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

#nav .mainlevel ul {position:absolute; display:none;
*width:2000px;/*IE is great need, width>=li.length*/}

复制代码 代码如下:var move = function
(obj, target卡塔尔(قطر‎ { var timer; clearInterval(timer卡塔尔; timer =
setInterval(function (State of Qatar { var speed = (target – obj.offsetTop卡塔尔/3; speed
= speed 0 ? Math.ceil(speed卡塔尔(قطر‎ : Math.floor(speed卡塔尔(قطر‎; if
(Math.abs(obj.offsetTop – targetState of Qatar 4卡塔尔 { clearInterval(timer卡塔尔;
obj.style.marginTop = target + “px”; } else { obj.style.marginTop =
obj.offsetTop + speed + “px”; } }, 30卡塔尔;}

#nav .mainlevel li {float:left; background:#3f240e;}

ok,这几个响应式导航条基本就这么了,附上源码

#nav .mainlevel li a {padding:0 12px; line-height:24px; height:24px;
display:block; _padding-bottom:6px;/*IE6 only*/}

css3-js-response-nav(dnjishu.com).rar

#nav .mainlevel li a:hover {color:#3f240e; text-decoration:none;
background:#678900 url(images/slide-pannel_14.png) 0 0 repeat-x;}

#nav li a em/*input an em tag as a space*/ {padding:0 3px;}

.note {color:#3f240e; border-right:1px solid #fff; background:#678900
url(images/slide-pannel_14.png) 0 0 repeat-x; display:block;
line-height:34px; padding:0 3em;}

.Triangle_con {height:9px; background:url(images/bird.png) 36px 0
no-repeat; display:block; _margin-bottom:-6px;/*IE6 only*/}

.log {margin:100px auto; width:1000px; text-transform:capitalize;
line-height:200%;}

行使jquery代码达成动漫效果:

图片 3

发表评论

电子邮件地址不会被公开。 必填项已用*标注